@charset "UTF-8";
/* page.css | 2025.11.03 改修 */

:root {
	--index-s1-mb: clamp(-200px, calc(-100px - (200px - 100px) * var(--fluid-td)), -100px);
	--index-popup-h: clamp(30px, calc(30px + (38px - 30px) * var(--fluid)), 38px);
	--title-1: clamp(18px, calc(18px + (28px - 18px) * var(--fluid)), 28px);
}

/*//////////////////
#index
//////////////////*/

/* common */
#index {  }
/* #mainv */
#index #mainv { height:100vh;height:100svh; width: 100%; min-height: 670px; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;}
#index #mainv .copybox { margin-top: 2em; }
#index #mainv .copybox p.maincopy { padding: 0 0.8em 0.2em; text-align: center; border-bottom: 1px solid var(--c-white); position: relative;}
#index #mainv .copybox p.maincopy img { display: inline-block; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2)); width: clamp(260px, calc(260px + (680px - 260px) * var(--fluid)), 680px);}
#index #mainv .copybox p.maincopy::before,
#index #mainv .copybox p.maincopy::after{ content: ""; font-size: 0; line-height: 0; width: 7px; height: 7px; border-radius: 4px; position: absolute; right: 0; bottom: -4px; background: var(--c-white); }
#index #mainv .copybox p.maincopy::before { left: 0; right: auto; }
#index #mainv .copybox p.subcopy {text-align: center; font-size:var(--title-1); color: var(--c-white);  padding: 0.7em 1em 0; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); line-height: 1.5;}
/* #scrolldown */
#index #mainv #scrolldown {position: absolute;bottom: 0;left: 0; right: 0; color: #fff; text-align: center;overflow: hidden; z-index: 3; }
#index #mainv #scrolldown .txt { margin-bottom: 5px; letter-spacing: 0.25em; font-size: clamp(var(--fs-xxs-min), calc(var(--fs-xxs-min) + (var(--fs-xxs-max) - var(--fs-xxs-min)) * var(--fluid)), var(--fs-xxs-max));}
#index #mainv #scrolldown .arr{ transform: rotate(180deg); height: 30px;width: 0px;margin-top: -1px; margin-left: auto;margin-right: auto; }
#index #mainv #scrolldown .arr>.inwrap {animation: scroll-down-line 2.5s infinite 851ms;width: 100%;height: 100%;display: block;}
#index #mainv #scrolldown .arr>.inwrap:after {content: '';display: block;width: 0;height: 100%;border-right: 1px solid #fff;transform-origin: right center;transform: scale(1, 0.001);transform: none;transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 0s linear;}
@media screen and (max-width: 500px){
	#index #mainv { height: 600px; }
}
@keyframes scroll-down-line {
	0% { transform-origin: 50% 0%; transform: scale(1, 1); }
	20% { transform-origin: 50% 0%; transform: scale(1, 0.001); }
	20.01% { transform-origin: 50% 100%; }
	38% { transform-origin: 50% 100%; transform: scale(1, 1); }
}

/* loading */
#loading { position: fixed; inset: 0; background: var(--c-brown); display: flex; align-items: center; justify-content: center; z-index: 9999; width: 100vw; height: 100vh; height: 100svh; }
.spinner { width: 40px; height: 40px; position: relative; }
.double-bounce1,
.double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: 0.6; position: absolute; top: 0; left: 0; animation: sk-bounce 2.0s infinite ease-in-out; }
.double-bounce2 { animation-delay: -1.0s; }
@keyframes sk-bounce {
	0%, 100% { transform: scale(0.0); }
	50% { transform: scale(1.0); }
}

/* ul.slidelist */
#index #mainv ul.slidelist { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; height:100%; width: 100%; transition:0.5s; z-index: -1; }
#index #mainv ul.slidelist .slick-list,
#index #mainv ul.slidelist .slick-track,
#index #mainv ul.slidelist .slick-slide { height: 100%; }
#index #mainv ul.slidelist li img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; object-position: 50% 80%; transform: scale(1.12); transition: 3s cubic-bezier(.645, .045, .355, 1); z-index: -1; }
#index #mainv ul.slidelist li.slick-current img  { transform: scale(1.12); }
#index #mainv ul.slidelist li.slick-current img,
#index #mainv ul.slidelist li.slick-slide[tabindex="0"] img { animation: zoomout 10s linear 0s 1 normal both; }
#index #mainv ul.slidelist li.slick-slide[tabindex="-1"] img { width: 100%; height: 100%; }
@media screen and (max-width: 1100px){
	#index #mainv { min-height: 0; } 
}

/* #sec_1 */
#index #sec_1 { font-size: var(--fs-xl);}
/* insec._1 */
#index #sec_1 .insec._1 { padding: 3em 0;}
#index #sec_1 .insec._1 p { margin: clamp(60px, calc(60px + (110px - 60px) * var(--fluid)), 110px) 0; text-align: center; line-height: 2.1;}
#index #sec_1 .insec._1 p:nth-child(2) { display: flex; align-items: center; justify-content: center;}
#index #sec_1 .insec._1 p:nth-child(2)::before,
#index #sec_1 .insec._1 p:nth-child(2)::after { content: ""; width: clamp(40px, calc(40px + (60px - 40px) * var(--fluid)), 60px) ; height: 1px; display: inline-block; background-color: var(--c-base); margin-right: 10px;}
#index #sec_1 .insec._1 p:nth-child(2)::after { margin-left: 10px;}
@media screen and (max-width: 1100px){
	#index #sec_1 .insec._1 p:nth-child(2)::before,
	#index #sec_1 .insec._1 p:nth-child(2)::after { display: none;}
}
/* insec._2 */
#index #sec_1 .insec._2{ }
#index #sec_1 .insec._2 .inblock { display: flex; justify-content: space-between; align-items: center; }
#index #sec_1 .insec._2 .inblock .imbbox { position: relative; display: flex; align-items: center; justify-content: center; }
#index #sec_1 .insec._2 .inblock .txtbox { flex: 1; display: flex; align-items: center; justify-content: center; line-height: 2.1; position: relative; flex-direction: column;}
#index #sec_1 .insec._2 .inblock .imbbox img { position: absolute; top: 0; left: 0; z-index: 1;}
#index #sec_1 .insec._2 .title-inblock { text-align: center; margin-bottom: clamp(30px, calc(30px + (50 - 30) * var(--fluid)), 50px); color: var(--c-white); position: static; z-index: 2; }
#index #sec_1 .insec._2 .title-inblock .en { font-size: clamp(36px, calc(36px + (90px - 36px) * var(--fluid-wide)), 90px); position: relative; display: inline-block; padding: 0 0.3em 0 0.5em; text-align: center; border-bottom: 1px solid var(--c-white); line-height: 1.1;}
#index #sec_1 .insec._2 .title-inblock .main {  }
#index #sec_1 .insec._2 .title-inblock .en::before,
#index #sec_1 .insec._2 .title-inblock .en::after{ content: ""; font-size: 0; line-height: 0; width: 7px; height: 7px; border-radius: 4px; position: absolute; right: 0; bottom: -4px; background: var(--c-white); }
#index #sec_1 .insec._2 .title-inblock .en::before { left: 0; right: auto; }
#index #sec_1 .insec._2 .inblock._1 .imbbox { width: 43vw; height: calc(20vw + 400px); }
#index #sec_1 .insec._2 .inblock._1 .txtbox { margin-top: var(--index-s1-mb); }
#index #sec_1 .insec._2 .inblock._1 .txtbox .comment { margin-top: 1em;}
#index #sec_1 .insec._2 .inblock._1 .txtbox .comment>span { font-size: clamp(var(--fs-xxs-min), calc(var(--fs-xxs-min) + (var(--fs-xxs-max) - var(--fs-xxs-min)) * var(--fluid)), var(--fs-xxs-max)); background-color: var(--c-white); border: 1px solid var(--c-base); line-height: 1; padding: 0.2em 0.3em 0.35em 0.5em; display: inline-block; vertical-align: 3px; margin-right: 0.8em;}
#index #sec_1 .insec._2 .inblock._2 { flex-direction: row-reverse; align-items: flex-end; margin-top: var(--index-s1-mb);}
#index #sec_1 .insec._2 .inblock._2 .imbbox { width: 46vw; height: calc(20vw + 300px); }
#index #sec_1 .insec._2 .inblock._2 .txtbox .imgwrap { position: absolute; width: clamp(200px, calc(200px + (300px - 200px) * var(--fluid-td)), 300px); bottom: clamp(-60px, calc(-40px - (60px - 40px) * var(--fluid-td)), -40px); right: clamp(-250px, calc(-160px - (250px - 160px) * var(--fluid-td)), -160px); z-index: 3;}
#index #sec_1 .insec._2 .inblock._2 .txtbox .reveal { width: 100%; height: 100%; }
#index #sec_1 .insec._2 .inblock._2 .txtbox .reveal img.ride { }
@media screen and (max-width: 1100px){
	#index #sec_1 .insec._2 .inblock { justify-content: center; flex-direction: column; }	
	#index #sec_1 .insec._2 .inblock .imbbox { width: 100%!important; height: auto!important; aspect-ratio: 4/3; }
	#index #sec_1 .insec._2 .inblock .txtbox { margin: clamp(60px, calc(60px + (130px - 60px) * var(--fluid)), 130px) auto!important; text-align: center; width: 88%; }
	#index #sec_1 .insec._2 .inblock._2 { flex-direction: column; align-items: center; margin-top: 0;}
	#index #sec_1 .insec._2 .inblock._2 .txtbox .imgwrap { position: static; width: 46vw; max-width: 400px; margin-bottom: clamp(40px, calc(40px + (80px - 40px) * var(--fluid)), 80px);}
	#index #sec_1 .insec._2 .inblock._2 .txtbox { margin-bottom: 0!important;}
}
@media screen and (max-width: 500px){
	#index #sec_1 .insec._2 .inblock .txtbox { text-align: justify; }
}

/* #sec_2 */
#index #sec_2 { font-size: var(--fs-xl);}
/* inblock._1 */
#index #sec_2 .inblock._1 { border: 1px solid var(--c-base); background-color: var(--c-white); display: flex; justify-content: center; margin-top: 60px; position: relative; padding: 50px 1em 1.3em;}
#index #sec_2 .inblock._1 .title-inblock {display: flex; flex-direction: column; align-items: center; padding: 0 0.5em; position: absolute; top: -80px; }
#index #sec_2 .inblock._1 .title-inblock .main { position: static; z-index: 2;}
#index #sec_2 .inblock._1 .title-inblock::before { content: ""; height: 1px; width: 100%; font-size: 0; text-align: center; background-color: var(--c-white); display: inline-block; position: absolute; top: 79px; left: 0; }
#index #sec_2 .inblock._1 .title-inblock .popup img { height: var(--index-popup-h);  }
#index #sec_2 .inblock._1 .title-inblock .main img { width: 520px; }
#index #sec_2 .inblock._1 .title-inblock .main img:nth-child(2) { display: none; }
#index #sec_2 .inblock._1 .txtbox { text-align: center;}
#index #sec_2 .inblock._1 .txtbox>.txt1 { position: relative;padding: 0 0.8em 0.8em; margin-bottom: 0.8em; text-align: center; border-bottom: 1px solid var(--c-base); }
#index #sec_2 .inblock._1 .txtbox>.txt1::before,
#index #sec_2 .inblock._1 .txtbox>.txt1::after{ content: ""; font-size: 0; line-height: 0; width: 7px; height: 7px; border-radius: 4px; position: absolute; right: 0; bottom: -4px; background: var(--c-base); }
#index #sec_2 .inblock._1 .txtbox>.txt1::before { left: 0; right: auto; }
#index #sec_2 .inblock._1 .txtbox >.list1{ display: flex; justify-content: center; flex-wrap: wrap; padding: 0 0.8em 0; }
#index #sec_2 .inblock._1 .txtbox >.list1>li:not(:last-child)::after { content:"/"; padding: 0 0.5em; }
@media screen and (max-width: 1100px){
	#index #sec_2 .inblock._1 .title-inblock { top: -68px; }
	#index #sec_2 .inblock._1 .title-inblock::before { top: 67px; }
}
@media screen and (max-width: 767px){
	#index #sec_2 .inblock._1 .title-inblock { top: -93px; }
	#index #sec_2 .inblock._1 .title-inblock::before { top: 92px; }
	#index #sec_2 .inblock._1 .title-inblock .main { margin-top: 10px;}
	#index #sec_2 .inblock._1 .title-inblock .main img { width: 260px; display: none; }
	#index #sec_2 .inblock._1 .title-inblock .main img:nth-child(2) { display: block; }
	#index #sec_2 .inblock._1 .txtbox >.list1 { flex-direction: column;}
	#index #sec_2 .inblock._1 .txtbox >.list1>li:not(:last-child)::after { display: none;}
}
/* inblock._2 */
#index #sec_2 .inblock._2 .list2 { display: flex; column-gap: 3%; flex-wrap: wrap; max-width: 1100px; margin: 1em auto 0; }
#index #sec_2 .inblock._2 .list2>li { width:calc((100% - 6%) / 3); margin-top: 1.5em; }
#index #sec_2 .inblock._2 .list2>li:nth-child(4) { display: none;}
#index #sec_2 .inblock._2 .list2>li>a { display: flex; align-items: center; column-gap: 1em; letter-spacing: var(--ls-xss); font-size: clamp(var(--fs-xs-min), calc(var(--fs-xs-min) + (var(--fs-xs-max) - var(--fs-xs-min)) * var(--fluid-wide)), var(--fs-xs-max));}
#index #sec_2 .inblock._2 .list2>li .imgbox { width: clamp(70px, calc(70px + (110px - 70px) * var(--fluid)), 110px); height: clamp(70px, calc(70px + (110px - 70px) * var(--fluid)), 110px); position: relative; }
#index #sec_2 .inblock._2 .list2>li .txtbox { flex: 1; line-height: var(--lh-xs); }
#index #sec_2 .inblock._2 .list2>li .txtbox .title>span { padding-bottom: 0;} 
#index #sec_2 .inblock._2 .list2>li .txtbox .title { transition: color .3s; }
#index #sec_2 .inblock._2 .list2>li a:hover .txtbox .title { color: var(--c-mustard); }
@media screen and (max-width: 767px){
	#index #sec_2 .inblock._2 .list2 {column-gap: 4%; }
	#index #sec_2 .inblock._2 .list2>li { width:calc((100% - 4%) / 2); }
	#index #sec_2 .inblock._2 .list2>li:nth-child(4) { display: block;}
}
@media screen and (max-width: 500px){
	#index #sec_2 .inblock._2 .list2 {column-gap: 0; }
	#index #sec_2 .inblock._2 .list2>li { width: 80%; margin: 1.5em auto 0; }
	#index #sec_2 .inblock._2 .list2>li:nth-child(4) { display: none;}
	#index #sec_2 .inblock._2 .list2>li .imgbox { width: 100px; height: 100px; }
}

/* #sec_4 */
#index #sec_4 { font-size: var(--fs-xl); }

/* #sec_5 */
#index #sec_5 { }
#index #sec_5 .txt3 { text-align: center;}
@media screen and (max-width: 500px){
	#index #sec_5 .txt3 { text-align: justify;}
}
/* common */
#index #sec_5 .insec .titlebox { text-align: center; margin-bottom: 1em;}
#index #sec_5 .insec .titlebox>.popup img { height: var(--index-popup-h); }
#index #sec_5 .insec .titlebox>.title { font-size: clamp(24px, calc(24px + (48px - 24px) * var(--fluid-wide)), 48px); margin: 0.2em 0 0; line-height: 1; }
#index #sec_5 .insec .block { display: flex; flex-direction: column;}
#index #sec_5 .insec .txtbox { flex: 1; flex: 1; display: flex; flex-direction: column;}
#index #sec_5 .insec .txtbox>.txt1 { font-size: var(--fs-xl); line-height: 1.8;}
#index #sec_5 .insec .txtbox>.txt1>span.brown { background-color: #eae0c0; padding: 0 0.2em;}
#index #sec_5 .insec .txtbox>.txt1>span.grey { background-color: #dad5d3; padding: 0 0.2em;}
/* insec._1 */
#index #sec_5 .insec._1 { display: flex; column-gap: 4%; align-items: stretch;}
#index #sec_5 .insec._1>.block { width:calc((100% - 4%) / 2); }
#index #sec_5 .insec._1 .txtbox>.txt1 { margin: 1em 0 2em;}
#index #sec_5 .insec._1 .txtbox>.inbox { border: 1px solid var(--c-base); background-color: var(--c-white); display: flex; flex-direction: column; position: relative; padding: 0 6% 1.5em; flex: 1;}
#index #sec_5 .insec._1 .txtbox>.inbox>.title { display: inline-block; margin: 0 auto; padding: 0 0.5em; font-size: var(--fs-xl); margin-top: -22px; position: relative; line-height: var(--lh-xs); text-align: center;}
#index #sec_5 .insec._1 .txtbox>.inbox>.title::before { content: ""; height: 1px; width: 100%; font-size: 0; text-align: center; background-color: var(--c-white); display: inline-block; position: absolute; top: 21px; left: 0; z-index: 1; }
#index #sec_5 .insec._1 .txtbox>.inbox>.title>span { position: relative; z-index: 2;}
#index #sec_5 .insec._1 .block._1 .titlebox>.title { color: var(--c-mustard); }
#index #sec_5 .insec._1 .block._1 .titlebox>.sub { color: var(--c-mustard);  }
#index #sec_5 .insec._1 .txtbox>.inbox>.subtitle { margin: 1em 0 0.4em;}
#index #sec_5 .insec._1 .txtbox>.inbox>.subtitle>span { }
#index #sec_5 .insec._1 .txtbox>.inbox>.list { text-align: left;}
#index #sec_5 .insec._1 .txtbox>.inbox>.list>li { display: inline-block; line-height: 1.6; margin-bottom: 0.2em; margin-right: 1em;}
@media screen and (max-width: 1100px){
	#index #sec_5 .insec._1 .txtbox>.txt1 { margin: 1em 0 3em;}
	#index #sec_5 .insec._1 .txtbox>.inbox>.title { line-height: 1.5; margin-top: -45px; }
	#index #sec_5 .insec._1 .txtbox>.inbox>.title::before { top: 44px; }
}
@media screen and (max-width: 767px){
	#index #sec_5 .insec._1 .txtbox>.inbox>.list { text-align: justify;}
	#index #sec_5 .insec._1 .txtbox>.inbox>.list>li { display: block; margin-right: 0;}
	#index #sec_5 .insec._1 .txtbox>.inbox>.title { margin-top: -39px; }
	#index #sec_5 .insec._1 .txtbox>.inbox>.title::before { top: 38px; }
}
@media screen and (max-width: 500px){
	#index #sec_5 .insec._1 { align-items: flex-start; flex-wrap: wrap; padding-top: 1em;}
	#index #sec_5 .insec._1>.block { width: 100%; margin-bottom: 2.8em;  padding-bottom: 2.8em; border-bottom: 1px solid var(--c-base); }
}
/* insec._2 */
#index #sec_5 .insec._2 { display: flex; column-gap: 4%; align-items: center; justify-content: space-between; margin-top: 4em; padding: 2.6em 0; border-bottom: 1px solid var(--c-base); border-top: 1px solid var(--c-base);margin-bottom: 2em}
#index #sec_5 .insec._2 .wrap { display: flex; column-gap: 7%; justify-content: space-between; align-items: center; width: 53%;}
#index #sec_5 .insec._2 .wrap .imgbox { flex: 1; }
#index #sec_5 .insec._2 .txtbox { flex: 1;}
@media screen and (max-width: 1100px){
	#index #sec_5 .insec._2 { flex-direction: column; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
	#index #sec_5 .insec._2 .wrap { display: flex; column-gap: 6%; justify-content: center; align-items: center; width: 100%; margin-bottom: 1.3em;}
	#index #sec_5 .insec._2 .wrap .imgbox { max-width: 40vw; }
	#index #sec_5 .insec._2 .wrap .titlebox { margin-bottom: -1.5em;}
}
@media screen and (max-width: 500px){
	#index #sec_5 .insec._2 { display: flex; column-gap: 4%; align-items: center; justify-content: space-between; margin-top: 0; padding: 0; border: none; ;}
	#index #sec_5 .insec._2 .wrap { flex-direction: column; flex-wrap: wrap; }
	#index #sec_5 .insec._2 .wrap .imgbox { max-width: 100%; }
	#index #sec_5 .insec._2 .wrap .titlebox { margin-bottom: 1em;}
}


/*//////////////////
#low-blog.index
//////////////////*/
#low-blog.index #sec_nav { padding: 2em 0; }
#low-blog.index #sec_nav ul.list-cat { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.1em 0.5em; }
#low-blog.index #sec_nav ul.list-cat>li>a { font-size: var(--fs-xs); border: 1px solid var(--c-base); background-color: var(--c-white); line-height: 1; padding: 0.1em 1em; border-radius: 15px; letter-spacing: 0.1em; }
#low-blog.index #sec_nav ul.list-cat>li>a:hover { background-color: var(--c-mustard);}
#low-blog.index #sec_nav .title { font-size: var(-fs-lg); text-align: center; margin-top: 1.5em;} 
#low-blog.index #sec_nav ul.list-tag { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.2em 0.5em; } 
#low-blog.index #sec_nav ul.list-tag>li>a { }



/*//////////////////
#low-blog.under
//////////////////*/

#low-blog.under>.bodywrap { background-color: var(--c-mustard-l); padding-top: clamp(120px, calc(50px + 13vw), 320px); padding-bottom: clamp(60px, calc(60px + (120px - 60px) * var(--fluid)), 120px) }
#low-blog.under #main { display: flex; justify-content: space-between; gap: 0 8%; flex-wrap: wrap;}
#low-blog.under #main .cnt-main { flex: 1;order: 1;}
#low-blog.under #main .cnt-side { width: 240px;order: 2;}
#low-blog.under #main .c-pager { width: 100%; order: 3;}
@media screen and (max-width: 1100px){
	#low-blog.under #main .cnt-side { width: 23vw; max-width: 240px;}
}
@media screen and (max-width: 767px){
	#low-blog.under #main { flex-direction: column;}
	#low-blog.under #main .cnt-side { width: 100%; max-width: none; order: 3}
	#low-blog.under #main .c-pager { order: 3; margin: 2em auto 5em; }
}

#low-blog.under #main .cnt-main .title-main { font-size:var(--title-1); }
#low-blog.under #main .cnt-main .titlebox { padding-bottom: 3em; }
#low-blog.under #main .cnt-main .info { display: flex; align-items: center; gap: 0.6em 1em; margin: 3em 0 1em; flex-wrap: wrap; }
#low-blog.under #main .cnt-main .info>.cat { display: flex; gap: 0.5em; font-size: var(--fs-xxs); letter-spacing: 0.06em; margin-top: -0.1em;flex-wrap: wrap;  }
#low-blog.under #main .cnt-main .info>.cat>li>a { display: inline-block; background-color: var(--c-white); border-radius: 12px; border: 1px solid var(--c-base); line-height: 1; padding: 0.3em 0.8em; }
#low-blog.under #main .cnt-main .info>.cat>li>a:hover { background-color: var(--c-mustard);}
#low-blog.under #main .cnt-main .info>.tag { display: flex; gap: 0 1em; font-size: var(--fs-xs); margin-top: -0.1em;flex-wrap: wrap; }
#low-blog.under #main .cnt-main .time { display: flex; font-size: var(--fs-xxs); color: #9f938e; gap: 1em; }
#low-blog.under #main .cnt-main .time>.public { display: flex; align-items: center;}
#low-blog.under #main .cnt-main .time>.public::before,
#low-blog.under #main .cnt-main .time>.update::before { content: ""; width: 16px; height: 16px; background-image: url(../img/common/public.svg); background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block; margin-bottom: -1px; margin-right: 0.3em; }
#low-blog.under #main .cnt-main .time>.update::before { width: 14px; height: 12px; background-image: url(../img/common/updata.svg); margin-bottom: -1px; margin-right: 0.3em; }
#low-blog.under #main .cnt-main .mainimg { max-width: 100%; margin-bottom: 3em;}
@media screen and (max-width: 500px){
	#low-blog.under #main { flex-direction: column;}
	#low-blog.under #main .cnt-main { flex: 1;}
	#low-blog.under #main .cnt-side { width: 100%; max-width: none;}
}


#low-blog.under #main .cnt-side .insec { margin-bottom: 2em;}
#low-blog.under #main .cnt-side .insec>.title { font-size: var(--fs-lg); margin-bottom: 0.5em;}
#low-blog.under #main .cnt-side .cat { display: flex; gap: 0.5em; font-size: var(--fs-xxs); letter-spacing: 0.06em; margin-top: -0.1em;flex-wrap: wrap; }
#low-blog.under #main .cnt-side .cat>li>a { display: inline-block; background-color: var(--c-white); border-radius: 12px; border: 1px solid var(--c-base); line-height: 1; padding: 0.3em 0.8em; }
#low-blog.under #main .cnt-side .cat>li>a:hover { background-color: var(--c-mustard);}
#low-blog.under #main .cnt-side .tag { display: flex; gap: 0 1em; font-size: var(--fs-xs); margin-top: -0.1em;flex-wrap: wrap; margin-top: -0.5em;}
/* .ppopular */
#low-blog.under #main .cnt-side .ppopular { display: flex; gap: 1em; flex-wrap: wrap; margin: 1em auto 0; }
#low-blog.under #main .cnt-side .ppopular>li { width:100%; }
#low-blog.under #main .cnt-side .ppopular>li>a { display: flex; align-items: center; column-gap: 1em; letter-spacing: var(--ls-xss); font-size: var(--fs-xxs);}
#low-blog.under #main .cnt-side .ppopular>li .imgbox { width: clamp(70px, calc(70px + (80px - 70px) * var(--fluid)), 80px); height: clamp(70px, calc(70px + (80px - 70px) * var(--fluid)), 80px); }
#low-blog.under #main .cnt-side .ppopular>li .txtbox { flex: 1; line-height: var(--lh-xs); }
#low-blog.under #main .cnt-side .ppopular>li .txtbox .title>span { padding-bottom: 0;} 
#low-blog.under #main .cnt-side .ppopular>li .txtbox .title { transition: color .3s; }
#low-blog.under #main .cnt-side .ppopular>li a:hover .txtbox .title { color: var(--c-mustard); }
@media screen and (max-width: 767px){
	#low-blog.under #main .cnt-side .ppopular {column-gap: 4%; }
	#low-blog.under #main .cnt-side .ppopular>li { width:calc((100% - 4%) / 2); }
}
@media screen and (max-width: 500px){
	#low-blog.under #main .cnt-side .ppopular  { gap: 0; }
	#low-blog.under #main .cnt-side .ppopular>li { width: 100%; }
	#low-blog.under #main .cnt-side .ppopular>li:not(:first-child) { margin: 1em auto 0; }
	#low-blog.under #main .cnt-side .ppopular>li .imgbox { width: 100px; height: 100px; }
}
/* .bnr */
#low-blog.under #main .cnt-side .bnr { display: flex; gap: 1em; flex-wrap: wrap; margin: 3em auto 0; justify-content: center; }
#low-blog.under #main .cnt-side .bnr>li { width: 100%;}
#low-blog.under #main .cnt-side .bnr>li a { width:100%; aspect-ratio: 240 / 140; position: relative; display: flex; justify-content: center; align-items: center; }
#low-blog.under #main .cnt-side .bnr>li a>img { position: absolute; z-index: 1;}
#low-blog.under #main .cnt-side .bnr>li a>.txt { position: static; color: var(--c-white); z-index: 3;}
#low-blog.under #main .cnt-side .bnr>li a>.txt::after { content: ""; display: inline-block; margin-left: 5px; width: 12px; height: 7px; background-image: url(../img/common/icon1_w.svg); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform .4s; transform: translateX(0); vertical-align: 3px; }
#low-blog.under #main .cnt-side .bnr>li a:hover>.txt::after { transform: translateX(3px); }
#low-blog.under #main .cnt-side .bnr>li a::before { content: ""; width: 100%; height: 100%; background-color: var(--c-base); opacity: 0; z-index: 2; position: absolute; transition: .3s;}
#low-blog.under #main .cnt-side .bnr>li a:hover::before { opacity: .6;}
@media screen and (max-width: 767px){
	#low-blog.under #main .cnt-side .bnr>li { max-width: 240px;}	
}


/*//////////////////
#contact.index
//////////////////*/
#contact.index #main { background-color: var(--c-mustard-l); }
#contact.index #sec_1 .insec { background-color: var(--c-white); padding: clamp(2em, calc(40px + (60px - 40px) * var(--fluid)), 60px); }
/* contactbox */
#contact.index #sec_1 .contactbox { background: var(--c-mustard); padding: 70px 0; color: var(--c-white); margin-top: 3em; }
#contact.index #sec_1 .contactbox .txt1 { font-size: var(--fs-xl);text-align: center;}
#contact.index #sec_1 .contactbox .btnbox { margin-top: 0.5em;}
#contact.index #sec_1 .contactbox .btnbox>li.tel .btn span::after { display: none;}
#contact.index #sec_1 .contactbox .btnbox>li.tel { position: relative; padding-right: calc(3em - 10px);}
#contact.index #sec_1 .contactbox .btnbox>li.tel::after { content: "・"; position: absolute; top: 20%; right: 0; font-size: 30px; line-height: 1; }
	#contact.index #sec_1 .contactbox .btnbox>li p { line-height: 1.65; }
@media screen and (max-width: 1100px){
}
@media screen and (max-width: 767px){
	#contact.index #sec_1 .contactbox .btnbox { flex-direction: column; }
	#contact.index #sec_1 .contactbox .btnbox>li.tel::after { display: none;}
	#contact.index #sec_1 .contactbox .btnbox>li.tel { padding-right: 0; margin-bottom: 0.6em;}
}


