@charset "utf-8";

/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

body { min-width: 0px; font-size: 0.9em;}

.ta_right-s_center { text-align: center;}
.ta_left-s_center { text-align: center;}
.ta_center-s_left { text-align: left;}

.hidden_s { display: none !important;}

/* margin */
.mb40-20 { margin-bottom: 20px !important;}
.mb60-30, .mb50-30 { margin-bottom: 30px !important;}
.mb80-40 { margin-bottom: 40px !important;}
.mb100-60 { margin-bottom: 60px !important;}
.mb120-60 { margin-bottom: 60px !important;}
.mb120-80 { margin-bottom: 80px !important;}
.mb160-80 { margin-bottom: 80px !important;}

/* ------------------------
	ヘッダー
------------------------ */

body { padding-top: 0px;}

.header { position: static; min-width: initial; display: block; padding: 0;}
.header h1, .sp-navi .logo { padding: 0 60px 0 10px; width: auto; line-height: 50px;}
.header h1 img, .sp-navi .logo img { max-height: 36px; width: auto; vertical-align: middle;}

/* ------------------------
	グローバルナビ
------------------------ */

/* ハンバーガーメニュー */
.humberger {
	background: #236880;
	cursor: pointer;
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 50px;
	height: 50px;
	z-index: 10001;
}
.humberger span {
	background: #fff;
	border-radius: 15px;
	position: absolute;
	left: 10px;
	width: 30px;
	height: 3px;
	transition: 0.4s;
}
.humberger span:nth-of-type(1) { top: 9px;}
.humberger span:nth-of-type(2) { top: 17px;}
.humberger span:nth-of-type(3) { top: 25px;}
.humberger:after {
	color: #fff;
	content: 'MENU';
	display: block;
	font-size: 10px;
	text-decoration: none;
	text-align: center;
	transition: 0.4s;
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 100%;
}
.is-open .humberger:after { content: 'CLOSE';}
.is-open .humberger span:nth-of-type(1) { transform: translateY(6px) rotate(-45deg);}
.is-open .humberger span:nth-of-type(2) { opacity: 0;}
.is-open .humberger span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg);}

/* ナビ本体 */
.sp-navi { -webkit-text-size-adjust: 100%;}
.sp-navi.is-open .sp-navi-inner {
	opacity: 1;
	visibility: visible;
	z-index: 10000;
}
.sp-navi .sp-navi-inner {
	background: #f9f8f8;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0px;
	height: 100%;
	width: 100%;
	transition: .5s;
	padding-bottom: 30px;
}

.sp-navi .list01 li { position: relative;}
.sp-navi .list01 li > a, .sp-navi .list01 li > span { display: block; text-decoration: none; border-bottom: dashed 1px #ccc; padding: 0.5em 0.5em 0.5em 2.7em; font-size: 1.15em; position: relative; color: #3c3c3c;}
.sp-navi .list01 > li > a:before, .sp-navi .list01 > li > span:before { content: ""; position: absolute; left: 1em; top: calc(1.5em - 1.5px); width: 0.7em; height: 3px; background-color: #236880;}
.sp-navi .list01 > li ul { display: none;}
.sp-navi .list01 > li li a { display: block; text-decoration: none; border-bottom: dashed 1px #ccc; padding:  0.5em 0.5em 0.5em 3.3em; font-size: 1.15em; position: relative;}
.sp-navi .list01 > li li a:before { content: ""; position: absolute; left: 2em; top: 50%; width: 0.8em; height: 1px; background-color: #236880;}

.sp-navi .open_btn { position: absolute; top: 0px; right: 0px; height: 2.2em; background-color: #236880; width: 2.2em; line-height: 2; font-size: 1.6em; text-align: center; cursor: pointer; color: #fff;}
.sp-navi .open_btn:after { content: "+";}
.sp-navi .open_btn.open:after { content: "-";}

.sp-navi .list02, .sp-navi .list03 { display: flex; justify-content: center; align-items: center;}
.sp-navi .list02 a { display: block; color: #fff; text-decoration: none; background: url("../images/common/ico_cart.svg") no-repeat 1.4em center #5aa8a7; background-size: 1.3em auto; padding: 1em 1.3em 1em 3.1em; font-size: min(3.3vw,1em);}
.sp-navi .list02 li:last-child a { background: url("../images/common/ico_mail.svg") no-repeat 0.85em center #236880; background-size: 1.5em auto;}
.sp-navi .list03 { gap: 1.2em;}
.sp-navi .list03 img { vertical-align: middle; width: 2.5em;}

/* ------------------------
	フッター
------------------------ */

.footer_nav { padding: 50px 15px;}

.pagetop { right: 15px; padding-bottom: 15px;}


/*------------------------------------------------------

	トップページ

------------------------------------------------------*/

.mainimage { height: calc(100dvh - 50px);}

.top_bg01 { padding-top: 60px;}

.top_pickup { flex-flow: column; align-items: center; gap: 1.5em;}
.top_pickup .news-slider { width: 100%; flex: none;}

.top_sec01 { border-radius: 20px; margin: 0 10px; padding-top: 60px;}
.top_sec01 h3 { font-size: min(5.5vw,2em);}
.top_sec01 section:first-of-type h3 { font-size: min(7.5vw,2em);}
.top_sec01 .text01 { font-size: min(5vw,1.6em);}
.top_sec01 .box01 { flex-flow: column !important; gap: 30px;}
.top_sec01 .box01 .box_inner, .top_sec01 .box01 .img_box { width: auto;}
.top_sec01 .text02 { font-size: min(4.5vw,1.25em);}
.top_sec01 section:last-of-type .box01 .img_box { margin-top: -40px;}

.top_bnr.mb100-60 { margin-bottom: 30px !important;}
.top_bnr .list01 { gap: 0;}
.top_bnr .list01 li { margin: 0 -2% 1.5em;}
.top_bnr .list01 li.break { display: none;}
.top_bnr .list01 li img { width: 55%; height: auto;}

.top_sec02 .list01 { gap: 50px 2em; justify-content: center;}
.top_sec02 .list01 li { width: calc((100% - 2em) / 2); max-width: 320px;}
.top_sec02 h3.fo13 { font-size: min(3.5vw,1.3em) !important;}

.top_bg02 { padding-top: 60px;}

.top_sec03 .category a { width: 7.5rem;}

.top_sec04 section { display: block; margin-bottom: 50px;}
.top_sec04 .box_inner { width: auto; height: auto; display: block; margin: 0 -15px 30px; background: url("../images/top/top_sec05_bg01.svg") no-repeat center center; background-size: cover; padding: 55px 3em 90px;}
.top_sec04 .box_inner:before { display: none;}
.top_sec04 .box_inner > div { width: 100%;}
.top_sec04 figure { width: auto; margin: -80px 15px 0;}
.top_sec04 .sec02 .top_en_btmline:before { width: 0.8em; left: -1.2em;}
.top_sec04 .sec02 .more_btn a { padding-right: 2.5em;}

.top_bnr02 a { font-size: min(1.9vw,1.55em);}
.top_bnr02 figcaption { width: 90%;}

@media only screen and (max-width: 640px) {
  .top_sec03 dl { flex-wrap: wrap;}
  .top_sec03 dd:last-child { flex: none; width: 100%;}

  .top_bnr .list01 li { margin: 0 -4% 1.5em;}

  .top_bnr02 { display: block;}
  .top_bnr02 a { width: 100%; margin-bottom: 30px; font-size: min(4vw,1.55em);}
}

@media only screen and (max-width: 480px) {
  .news-track > li { width: 100%;}
  .top_pickup dl { justify-content: flex-start; gap: 0.5em 1em;}
  .top_pickup dt { width: auto;}
  .top_pickup .category { width: auto;}
  .top_pickup dd:last-child { width: 100%;}

  .top_sec02 .list01 li { width: 100%;}
  .top_sec02 h3.fo13 { height: auto; font-size: min(6vw,1.3em) !important;}

  .top_bnr .list01 li { margin: 0 -6% 1.5em;}
}
	

/*------------------------------------------------------

	下層ページ

------------------------------------------------------*/

.link_pad { padding-top: 50px; margin-top: -50px;}

.pagettl { padding: 60px 0;}
.pagettl .en_ttl { font-size: 2.2em; letter-spacing: 0.1em;}
.pagettl .en_ttl:before { width: 1.5em;}


/* ----------------------------
	固定ページテンプレート
---------------------------- */


@media only screen and (max-width: 640px) {
}

@media only screen and (max-width: 480px) {
}

/* ------------------------
	contact
------------------------ */

.contact_sec .btn_area input { background-size: 7px auto; padding: 7px 30px; min-width: 150px;}

@media only screen and (max-width: 570px) {
	.contact_sec01 h3 .show_sp { display: inline;}

	.contact_sec dl { display: block;}
	.contact_sec dt, .contact_sec dd {
		display: block;
		border-bottom: none;
		padding: 0px;
	}
	.contact_sec dt {
		width: 100%;
		margin-bottom: 10px;
	}
	.contact_sec dt span {
		display: inline-block;
		vertical-align: middle;
		padding: 3px 5px;
		float: none;
		margin-left: 10px;
		margin-top: 0px;
	}
	.contact_sec dt br { display: none;}
	.contact_sec input[type="text"], .contact_sec input[type="email"], .contact_sec textarea, .contact_sec select { width: 100%;}
}

/* ------------------------
	投稿
------------------------ */

.blog_box { display: block;}
.contents { width: auto; margin-bottom: 60px;}
.rNavi { width: auto; max-width: 500px; margin: auto;}

.archive_art figure { width: 30%;}
.archive_art .box_inner { width: 65%;}

.blog_subttl { font-size: 2em;}

.blog_box article.back_white { padding: 7% 5%;}

/* 記事ヘッダー */
.blog_header h1 { font-size: 2em; padding-bottom: 10px;}

/* 本文 */
.blog_content h2 { font-size: 1.9em !important;}
.blog_content h3, .blog_content h4 { font-size: 1.7em;}

.blog_content blockquote { padding: 6%;}

.blog_content table th, .blog_content table td { padding: 5px 0.5em; font-size: 0.8em;}

.blog_content a.btn04 { max-width: 500px; font-size: 1.25em; padding: 1.4em;}

.pager > ul { font-size: min(2.2vw,1em);}

/*WP用 投稿表示*/
.aligncenter, .alignright, .alignleft { display: block; margin: 0px auto 20px; float: none;}


@media only screen and (max-width: 480px) {
  .archive_art { display: block;}
  .archive_art figure { width: auto; margin-bottom: 20px;}
  .archive_art .box_inner { width: auto;}
}


/* ----------------------------
	固定ページテンプレート
---------------------------- */

.reverse_sp { display: flex; flex-direction: column-reverse;}

.faq { padding: 1em; border-radius: 0.7em;}
.faq dt > div, .faq dd > div { min-height: 2.5rem; padding-left: 3.5rem;}
.faq dt > div:before, .faq dd > div:before { width: 2.5rem; height: 2.5rem;}
.faq dt { padding-right: 2.5em;}

.white_img_box { flex-flow: column !important;}
.white_img_box figure { width: 100%;}
.white_img_box .box_inner { padding: 20px 4% 30px;}

.blog_content h2.line.reverse:after { left: 0; right: auto;}

.img_btn { padding: 1em;}

.bg_box { display: block; margin: auto;}
.bg_box figure { width: 100%; margin-bottom: 60px;}
.bg_box figure:before { top: -30px; bottom: -30px; right: 20%;}
.bg_box.reverse figure:before { left: 20%;}
.bg_box figcaption { top: calc(-1em - 30px);}
.bg_box figcaption .num { font-size: 2.5em;}
.bg_box .box_inner { width: auto;}

.step_dl { gap: 1.2em;}
.step_dl dt .num { font-size: 3em;}
.step_dl dd { font-size: 1.6em;}
.step_box01 .box_inner { margin-left: 0;}

.step_box02 section { display: block;}
.step_box02 section:not(:last-of-type) { padding-bottom: 50px;}
.step_box02 .box_inner02 { width: auto;}
.step_box02 .box_inner { margin-left: 5.5em;}
.step_box02 section > figure { margin: 1.5em 0 0 5.5em;}

.blog_content .table_wrap th { font-size: 0.9em;}

.metaslider.ms-theme-architekt .flexslider ul.slides .caption-wrap .caption { font-size: 1em !important;}

@media only screen and (max-width: 640px) {
  .blog_content .table02.responsive table, .blog_content .table02.responsive tbody, .blog_content .table02.responsive tr, .blog_content .table02.responsive th, .blog_content .table02.responsive td { display: block; width: 100%;}
  .blog_content .table02.responsive table { border-top: solid 1px #236880;}
  .blog_content .table02.responsive th { text-align: left; border-bottom: dotted 1px #236880; background: rgba(35,104,128,0.1);}
  .blog_content .table02.responsive th:after { display: none;}
  .blog_content .table02.responsive tr:first-child td, .blog_content .table02.responsive tr:first-child th { border-top: none}

}

@media only screen and (max-width: 480px) {
  .table_wrap { overflow-x: scroll; padding-bottom: 30px;}
  .table_wrap .show_sp { display: block;}
  .table_wrap table { min-width: 500px;}
}



/* top_add */
.mainimage .text_area { font-size: min(6vw,1.8em); width: 11.5em;}
.mainimage .text_area .img01 { width: 9em; margin-bottom: 0.2em;}