@charset "UTF-8";

/*------------
		reset
------------*/
html{ height: 100%; overflow-y: scroll; font-size: 62.5%;}
body{ height: 100%; margin: 0; padding: 0; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, dl, dt, dd{ margin: 0; padding: 0;}
li, ol{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
figure { margin: 0; padding: 0; }
*{ box-sizing: border-box;}


:root {
	--ff-nosa: YakuHanJP, "Noto Sans JP", sans-serif;
	--ff-nose: YakuHanMP, "Noto Serif JP", serif;
	--ff-bask: "Baskervville", serif;
	--c-teal: #006384;
	--c-brown: #331512;
	--c-orange: #ff6e00;
	--c-yellow: #ffdb00;
	--c-red: #d8342c;
	--c-navy: #00698d;
	--c-mint: #00b9c0;
	
	--c-ait: #0089cd;
	--c-dee: #0061b5;
	--c-khu: #ff167e;
	
	--c-water: #b9eff4;
	--c-green: #005e54;

}



/**********************************************************
*　追加ベース
**********************************************************/
.l-body { width: 100%;  }
.l-body.is-fixed { position: fixed; }
.l-body__inner { overflow-x: hidden; }





button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
.l-wrapper { width: calc(100% - 30px); margin-left: auto; margin-right: auto;　}

@media screen and (min-width: 681px) {
	
	.l-wrapper { width: 1100px; }
	
}

.sp-only { display: none !important; }
.sp-only-2 { display: none !important; }
.pc-only { display: block !important; }
.pc-only-2 { display: inline-block !important; }

@media screen and (max-width: 680px) {
	
	.sp-only { display: block !important; }
	.sp-only-2 { display: inline-block !important; }
	.pc-only { display: none !important; }
	.pc-only-2 { display: none !important; }
	
}


body{ height: 100%; font-family: YakuHanMP, "Noto Serif JP", serif; font-weight: 500; color: #000; }
@media print, screen and (min-width:681px) {
	
	body{ min-width: 1400px;}
	
}

/*	iOS Sarafi Hack	*/
_::-webkit-full-page-media,
_:future,
:root .something {  }



.aos__overflow--hidden{ overflow: hidden; }


.caption{font: 500 12px/16px 'YakuHanJP_Noto', 'Noto Sans JP', sans-serif; margin-top: 10px;}


.btn { display: flex; align-items: center; border-style: solid; border-width: 1px; }
.btn--center { justify-content: center; }

.btn--white { border-color: #fff; }
.btn--detail { display: flex; justify-content: center; align-items: center; width: 280px; height: 54px; background-color: #fff; border-radius: 28px; border-color: #004fa2; margin-left: auto; margin-right: auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.2em; color: #000; transition: all 400ms ease; }
.btn--detail:after { width: 9px; height: 14px; background: url("../img/ico_arrow.png") no-repeat 50% 50%/100% auto; transform: rotate(-90deg); margin-left: 80px; content: ""; }
.btn--detail:hover { background-color: #004fa2; color: #fff; }
.btn--detail:hover:after { background-image: url("../img/ico_arrow_white.png"); }


.upper-ttl { font-family: 'Lato', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.2em; }
.main-ttl { font-size: 3.4rem; line-height: 1.35; }
.cont-txt  { font-size: 1.5rem; line-height: 2.14; }
.ttl--blue { background: #004fa2; border-radius: 5px; padding: 5px 15px 7px; font-size: 1.5rem; font-weight: 500; line-height: 1.74; color: #fff; }

@media print, screen and (min-width:681px) {
	.upper-ttl { font-size: 1.5rem; }
	.main-ttl { font-size: 4.5rem; line-height: 1.35; }
	.cont-txt  { font-size: 1.6rem; line-height: 2.2; }
	.ttl--blue { foant-size: 1.6rem; line-height: 1.74; }
}

.ktkn { font-size: inherit; letter-spacing: -0.05em; }





.header { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; z-index: 500; transition: all 400ms linear; }
.header__inner { position: relative; display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 17px; z-index: 5; }
.header__logo {  }
.header__logo a { position: relative; display: block; }
.header__logo a img { width: 163px; }


/*.header__logo__black { opacity: 0; }*/



.header__navtrg { position: relative; width: 20px; height: 18px; display: inline-block; cursor: pointer; }
.header__navtrg span { position: absolute; left: 0; display: inline-block; transition: all 400ms linear; width: 20px; height: 2px; background: #000; }
.header__navtrg span:nth-of-type(1) { top: 0; animation: hamburgerLink_anime 2s cubic-bezier(0.23, 1, 0.32, 1) 1s infinite both; }
.header__navtrg span:nth-of-type(2) { top: 8px; transform: translateY(-50%); animation: hamburgerLink_anime 2s cubic-bezier(0.23, 1, 0.32, 1) 1.5s infinite both; }
.header__navtrg span:nth-of-type(3) { bottom: 0; animation: hamburgerLink_anime 2s cubic-bezier(0.23, 1, 0.32, 1) 2s infinite both; }
.header.active .header__navtrg span { animation: none; }
.header.active .header__navtrg span:nth-of-type(1),
.header.active .header__navtrg span:nth-of-type(3) { top: 50%; left: 50%; }
.header.active .header__navtrg span:nth-of-type(1) { transform: translate(-50%, -50%) rotate(-45deg); }
.header.active .header__navtrg span:nth-of-type(2) { width: 0; left: 50%; }
.header.active .header__navtrg span:nth-of-type(3) { transform: translate(-50%, -50%) rotate(45deg); }


/*
.header.active .header__logo__white { opacity: 0; }
.header.active .header__logo__black { opacity: 1; }
*/
@media screen and (max-width: 680px) {
	
	.header__logo { position: relative; z-index: 500; }
	.nav { position: fixed; top: 70px; left: 0; transition: all 400ms linear; width: 100%; height: calc(100dvh - 70px); background: var(--c-teal); z-index: 400; opacity: 0; pointer-events: none; }/* background: linear-gradient( to bottom, transparent 0px, transparent 60px, #fff 60px, #fff 100% );*/
	.nav.is-opened { opacity: 1; pointer-events: auto; }
	.nav__inner { padding-left: 15px; padding-right: 15px; }
	.nav__menu { display: flex; flex-direction: column; justify-content: center; width: 100%; }
	
	.nav__menu__item:not(:last-of-type) { border-bottom: 1px solid #b3b3b3; }
	.nav__menu__item a { position: relative; display: flex; align-items: center; height: 74px; padding: 0; font-size: 1.7rem; font-weight: 200; color: #fff; line-height: 1; }
	.nav__menu__item a::after { position: absolute; top: 50%; right: 10px; transform: translateY(-50%) rotate(45deg); width: 6px; height: 6px; border-right: 1px solid #fff; border-top: 1px solid #fff; content: ""; }
	.nav .nav__info { margin-top: 40px; }
	.nav__info__logo { display: block; width: 172px; margin: 0 auto; }
	.nav__info__txt { margin-top: 36px; font-family: var(--ff-nosa); font-size: 1.4rem; text-align: center; }
	.nav__info__txt dt { font-weight: 500; line-height: 1; }
	.nav__info__txt dd { margin-top: 14px; font-weight: 400; line-height: 1.428; letter-spacing: 0.075em; text-indent: 0.075em; }
	.nav__info__sns { display: flex; justify-content: center; margin-top: 30px; }
	.nav__info__sns li:not(:first-of-type) { margin-left: 28px; }
	.nav__info__sns img { width: 30px; }
	
}
@media screen and (min-width: 681px) {
	.header { overflow: scroll; -ms-overflow-style: none; scrollbar-width: none; }
	.header::-webkit-scrollbar { display: none; }
	
	.header__inner { min-width: 1400px; height: 90px; padding: 0 58px 0 30px; }
	.header__logo a img { width: 188px; }
	.header__navtrg,
	.nav .nav__info { display: none; }
	.nav__menu { display: flex; align-items: center; }
	.nav__menu__item:first-of-type { display: none; }
	.nav__menu__item:not(:first-of-type) { margin-left: 76px; }
	.nav__menu__item a { position: relative; font-size: 1.4rem; font-weight: 700; line-height: 1; letter-spacing: 0.02em; color: #000; }
	.nav__menu__item a::after { position: absolute; top: 50%; right: -22px; transform: translateY(-70%) rotate(135deg); width: 6px; height: 6px; border-right: 2px solid #00b9d7; border-top: 2px solid #00b9d7; content: ""; }
	.nav__bnr { display: none; }
}





.zoombtn { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 100%; }
.zoombtn:before { position: absolute; width: 100%; height: 100%; background-color: #353852; content: ""; opacity: 0.5; z-index: 5; transition: all 400ms ease; }
.zoombtn__txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; width: 100%; font-size: 2.0rem; line-height: 1; color: #fff; z-index: 10; }


.hover-zoom {
	display: block;
	overflow: hidden;
}

@media screen and (min-width: 681px) {
	
	.zoombtn:hover::before { opacity: 0.75; }
	.hover-zoom img.zoom { transition: transform .3s ease-out; }
	.hover-zoom:hover img.zoom { transform: scale(1.1); }
	
}

.l-footer { padding: 50px 0 0; }
.footer { display: flex; flex-direction: column; align-items: center; padding: 0 0 30px; font-family: var(--ff-nosa); }
.footer-links { display: flex; flex-direction: column; gap: 20px; }
.footer-links__item a { display: block; width: 220px; background: #000; border-radius: 30px; padding: 1.125em 1em; font-size: 1.6rem; line-height: 1.5; color: #CACACA; text-align: center; text-decoration: none; transition: 0.4s; }
.footer-logo { display: flex; flex-direction: column; align-items: center; margin-top: 50px; }
.footer-logo__text { display: flex; align-items: center; margin-top: 27px; padding-left: 5px; }
.footer-logo__lg-text { position: relative; display: block; padding-right: 20px; font-size: 3rem; line-height: 1.5; }
.footer-logo__lg-text::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 40px; background: rgba(51, 51, 51, 0.5); }
.footer-logo__sm-text { display: block; padding-left: 20px; font-size: 1.4rem; line-height: 1.3571; letter-spacing: 0.02em; }
.footer-logo img { display: block; width: 250px; }
.footer-info { margin-top: 25px; text-align: center; }
.footer-info__address { font-size: 1.3rem; line-height: 1.5385; letter-spacing: 0.01em; }
.footer-info__note { display: block; margin-top: 20px; font-size: 1.2rem; line-height: 1.6667; }

.sns-list { display: flex; justify-content: center; gap: 20px; margin-top: 23px; }
.sns-list__item a { text-decoration: none; transition: 0.4s; }
.sns-list__item img { display: block; }
.copyright { padding: 24px 0; border-top: 2px solid #F6F6F6; font-family: var(--ff-nosa); text-align: center; }
.copyright small { font-size: 1.2rem; line-height: 1.75; letter-spacing: 0.05em; color: #B1B1B1; }
.fixed-content { position: fixed; right: 0; bottom: 0; transform: translateY(100%); color: #FFF; transition: 0.4s; z-index: 100; display: flex; width: 100%; height: 50px; }
.fixed-content.is-visible { transform: translateY(0); }
.fixed-content__item { display: flex; align-items: center; justify-content: center; font-family: var(--ff-nosa); font-size: 1.3rem; font-weight: 700; line-height: 1.08; text-align: center; background: #00c3cc; color: #fff; flex-grow: 1; text-decoration: none; }
.fixed-content__item:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.4); }

@media screen and (max-width: 680px) {
	.l-footer { margin-bottom: 50px; }
}
@media screen and (min-width: 681px) {
	.l-footer { padding: 100px 0 0; }
	.footer { padding: 0 0 50px; }
	.footer-links { flex-direction: row; gap: 30px; }
	.footer-links__item a { transition: .4s; }
	.footer-links__item a:hover { opacity: .6; }
	.footer-logo { flex-direction: row; gap: 30px; margin-top: 56px; padding-left: 10px; }
	.footer-logo__text { margin-top: 0; padding-left: 0; }
	.footer-logo__lg-text { padding: 0 15px 0 30px; font-weight: 400; }
	.footer-logo__lg-text::after { left: 0; }
	.footer-logo__sm-text { padding: 0; }
	.footer-info { display: flex; align-items: center; margin-top: 48px; }
	.footer-info__address { order: 1; padding-right: clamp(3rem, -19.8rem + 19vw, 6.8rem); letter-spacing: 0.04em; }
	.footer-info__note { order: 3; margin-top: 0; padding-left: clamp(3.4rem, -21.2rem + 20.5vw, 7.5rem); }
	.sns-list { order: 2; margin-top: 0; }
	.sns-list__item a:hover { opacity: .6; }
	.copyright { padding: 30px 0; }
	.fixed-content { top: 50%; transform: translate(100%, -50%); flex-direction: column; gap: 6px; width: 47px; height: auto; }
	.fixed-content.is-visible { transform: translate(0, -50%); }
	.fixed-content__item { flex-grow: 0; font-size: 1.4rem; writing-mode: vertical-rl;  border-radius: 10px 0 0 10px; padding: 22px 0; white-space: nowrap; transition: 0.4s; }
	.fixed-content__item:not(:last-child) { border: none; }
}

/**********************************************************
*　常時固定ボタン
**********************************************************/
.fixed-button { position: fixed; bottom: 0; z-index: 10; width: 100%; opacity: 0; transform: translateY(100%); transition: 0.5s; }

.fixed-button__btn a { display: flex; justify-content: center; align-items: center; width: 100%; height: 60px; background-color: #fccf00; transition: 0.4s; font-size: 1.4rem; line-height: 1; color: #000; }
.fixed-button__btn a:hover { background-color: #d8aa1e; }
.fixed-button__btn a:visited,
.fixed-button__btn a:active { color: #000; }


.fixed-button.is-visible { opacity: 1; transform: translateY(0); }

@media screen and (min-width: 681px) {
	.fixed-button {
		bottom: auto;
		top: 50%;
		right: 0;
		transform: translate(100%, -50%);
		width: auto;
	}
	.fixed-button__btn a { width: 66px; height: 310px; border-radius: 10px 0 0 10px; writing-mode: vertical-rl; }
	.fixed-button__btn a:after { width: 7px; height: 10px; background: url("../img/ico_arrow.png") no-repeat 50% 50%/100% auto; margin-top: 20px; content: ""; }

	.fixed-button__btn:not(:last-child) {
		margin-bottom: 10px;
	}
	.fixed-content__item:hover { filter: brightness(110%); }
	.fixed-button.is-visible { transform: translate(0, -65%); opacity: 1; }
}

.img__fit{ height: inherit; object-fit: cover; font-family: 'object-fit: cover'; }/*IE・Edge用コード*/



/*----------------------------
	Modal
----------------------------*/
.mfp-bg { background-color: transparent; opacity: .7; }
.modal-black .mfp-bg { background: #000; }
.modal-white .mfp-bg { background: #fff; opacity: 1; }
.crcl-content { width: 100%; max-height: calc(100svh - 100px); overflow: auto; background: #fff; padding: 22px 20px 20px; }
	

	.crcl-point-wrap {  }
	.crcl-point {  }
	.crcl-point:not(:first-of-type) { margin-top: 31px; }
	.crcl-point__ttl { display: flex; justify-content: space-between; align-items: center; font-size: 1.6rem; font-weight: 900; line-height: 1.5; }
	.crcl-point__ttl__label { width: 40px; margin-right: 10px; }
	.crcl-point__ttl__txt { flex: 1; }
	.crcl-point__txt { margin-top: 5px; font-size: 1.3rem; font-weight: 500; line-height: 1.846; text-align: justify; }







	.crcl-popup__inner+.mfp-close { position: absolute; top: -10px; right: 10px; display: block; width: 40px; height: 40px; background: #b3b3b3; border-radius: 50%; opacity: 1; }
.crcl-popup__inner+.mfp-close:hover,
.crcl-popup__inner+.mfp-close:active { top: -10px; }
	.crcl-popup__inner+.mfp-close::before,
	.crcl-popup__inner+.mfp-close::after { position: absolute; top: 50%; left: 50%; display: block; width: 15px; height: 1px; background: #fff; content: ""; }
	.crcl-popup__inner+.mfp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
	.crcl-popup__inner+.mfp-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

	.crcl-content__close { display: flex; justify-content: center; align-items: center; width: 100%; height: 45px; margin-top: 20px; background: #b1b1b1; font-size: 1.2rem; font-weight: 700; line-height: 1; text-align: center; color: #fff; }

/*
.modal-white .mfp-close { position: fixed; top: 12px; right: 12px; width: 30px; height: 30px; background-color: var(--c-darkgrey); border-radius: 50%; opacity: 1; }
.modal-white .mfp-close::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 10px; height: 10px; background: url("../img/icon_close_white.png") no-repeat center/contain; content: ""; }
*/

@media print, screen and (max-width: 680px) {
	
	.crcl-popup__inner { display: flex; align-items: center; width: calc(100% - 40px); height: 100%; margin: 0 auto; }
	
	
	
}
@media print, screen and (min-width: 681px) {
	.mfp-content:has(.crcl-popup) { max-width: 770px; margin-left: auto; margin-right: auto; }
	.crcl-modal { position: relative; width: 860px; margin-left: auto; margin-right: auto; }
	.crcl-popup__inner { position: relative; }
	.crcl-content { position: relative; max-height: calc(100vh - 250px); padding: 47px 50px 50px; }
	
	


	.crcl-point-wrap {  }
	.crcl-point {  }
	.crcl-point__ttl { font-size: 2.0rem; }
	.crcl-point__ttl__label { width: 50px; margin-right: 12px; }
	.crcl-point__txt { margin-top: 8px; font-weight: 700; }
	
	
	.crcl-popup__inner+.mfp-close { top: -20px; right: -20px; width: 60px; height: 60px; transition: .4s; }
	.crcl-popup__inner+.mfp-close::before,
	.crcl-popup__inner+.mfp-close::after { width: 22px; }
	.crcl-popup__inner+.mfp-close:hover { top: -20px; right: -20px; background: #ccc; }

	.modal-white .mfp-close { top: 40px; right: 40px; width: 60px; height: 60px; }
	.modal-white .mfp-close::before { width: 20px; height: 20px; }
	.crcl-content__close { display: none; }
}
@media (max-width: 900px) {
	.mfp-container { padding-left: 0; padding-right: 0; }
}


/*	Modal Cutsom	*/
.crcl-ttl { margin-bottom: 15px; padding-bottom: 15px; }
.crcl-ttl img { width: auto; height: 52px; }

.crcl-upper {  }
.crcl-img {  }
.crcl-txt { margin-top: 12px; font: 500 1.2rem var(--ff-nosa); line-height: 1.75; text-align: justify; }
.crcl-learn { margin-top: 16px; padding: 0 15px 15px; }
.crcl-learn__label { display: flex; justify-content: center; align-items: center; height: 35px; background-repeat: no-repeat; background-position: center; background-size: cover; font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: 0.4em; text-indent: 0.4em; text-align: center; color: #fff; }
.crcl-learn__label img { width: auto; height: 15px; }

.crcl-learn__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 5px; margin-top: 6px; }
.crcl-learn__list li { display: inline-flex; align-items: center; font: 700 1.2rem var(--ff-nosa); line-height: 1.834; letter-spacing: -0.02em; }
.crcl-learn__list li::before { content: "\025cf"; margin-right: 0.3em; font-size: 0.85em; }
.crcl-learn__list li:last-of-type::after { content: "など"; margin-left: 10px; }


.crcl-kw { background: #e5e5e5; margin-top: 20px; padding: 15px 15px 15px; }
.crcl-kw__label { display: flex; justify-content: center; align-items: center; background: #9f9f9f; height: 40px; font-size: 1.6rem; font-weight: 600; line-height: 1; letter-spacing: 0.5em; text-indent: 0.5em; text-align: center; color: #fff; }

.crcl-kw__ttl { margin: 15px 0 13px; }
.crcl-kw__ttl img { width: auto; height: 34px; }
.crcl-kw__thumb { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 6px; grid-row-gap: 0px; }
.crcl-kw__txt { margin-top: 5px; font: 400 1.0rem var(--ff-nosa); line-height: 1.8; letter-spacing: -0.02em; text-align: justify; }


#popup-1 .crcl-ttl { border-bottom: 1px solid var(--c-ait); color: var(--c-ait); }
#popup-1 .crcl-learn { background: #c4ecf0; }
#popup-1 .crcl-learn__label { background-image: url("../../img/bg_crcl_1_learn.jpg"); }
#popup-1 .crcl-learn__list li::before { color: var(--c-ait); }
#popup-2 .crcl-ttl { border-bottom: 1px solid var(--c-dee); color: var(--c-dee); }
#popup-2 .crcl-learn { background: #c6e6f8; }
#popup-2 .crcl-learn__label { background-image: url("../../img/bg_crcl_2_learn.jpg"); }
#popup-2 .crcl-learn__list li::before { color: var(--c-dee); }
#popup-3 .crcl-ttl { border-bottom: 1px solid var(--c-khu); color: var(--c-khu); }
#popup-3 .crcl-learn { background: #ffe1e6; }
#popup-3 .crcl-learn__label { background-image: url("../../img/bg_crcl_3_learn.jpg"); }
#popup-3 .crcl-learn__list li::before { color: var(--c-khu); }

@media print, screen and (max-width: 680px) {
	.crcl-ttl { text-align: center; }
	.crcl-ttl__main,
	.crcl-ttl__sub { display: block; }
	.crcl-ttl__sub { margin-top: 10px; }
	.crcl-kw__ttl { position: relative; display: flex; justify-content: center; align-items: center; min-height: 35px; border-style: solid; border-width: 0 1px; }
	.crcl-kw__ttl::before,
	.crcl-kw__ttl::after { position: absolute; top: 0; display: block; width: 22px; height: calc(100% - 2px); border-style: solid; border-width: 1px 0; content: ""; }
	.crcl-kw__ttl::before { left: 0; }
	.crcl-kw__ttl::after { right: 0; }
	#popup-1 .crcl-kw__ttl,
	#popup-1 .crcl-kw__ttl::before,
	#popup-1 .crcl-kw__ttl::after { border-color: var(--c-ait); }
	#popup-2 .crcl-kw__ttl,
	#popup-2 .crcl-kw__ttl::before,
	#popup-2 .crcl-kw__ttl::after { border-color: var(--c-dee); }
	#popup-3 .crcl-kw__ttl,
	#popup-3 .crcl-kw__ttl::before,
	#popup-3 .crcl-kw__ttl::after { border-color: var(--c-khu); }
	
}
@media print, screen and (min-width: 681px) {
	.crcl-ttl { margin-bottom: 20px; padding-bottom: 20px; }
	.crcl-ttl img { height: 42px; }
	.crcl-upper { display: grid; grid-template-columns: 420px 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 20px; grid-row-gap: 16px; }
	.crcl-img { grid-area: 1 / 1 / 3 / 2; }
	.crcl-img img { width: 100%; height: 100%; object-fit: cover; }
	.crcl-txt { grid-area: 1 / 2 / 2 / 3; margin-top: -5px; }
	.crcl-learn { grid-area: 2 / 2 / 3 / 3; }
	.crcl-learn { margin-top: 0; }
	.crcl-kw { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; padding: 30px 30px 30px; }
	.crcl-kw__label { width: 100%; height: 45px; font-size: 2.0rem; }

	.crcl-kw__ttl { width: 100%; margin: 20px 0 18px; text-align: center; }
	.crcl-kw__ttl img { height: 19px; }
	.crcl-kw__thumb { width: 390px; grid-column-gap: 10px; margin-right: 20px; }
	.crcl-kw__txt { flex: 1; margin-top: -5px; font-size: 1.2rem; line-height: 1.75; }
}


/*	Scroll Hint	*/
.scrhint { position: relative; -ms-overflow-style: none; scrollbar-width: none; }
.scrhint::-webkit-scrollbar { display: none; }


/*.scrhint__image { overflow-x: auto; }*/
.scrhint__image { cursor: grab; }
.scrhint__image img { max-width: none; padding-right: 0; }


@media screen and (max-width: 680px) {
	.scrhint { margin-right: -30px; }
	.scrhint__image { padding: 0 0 5px; }
	.scrhint__image img { margin-right: 30px; }
}
@media screen and (min-width: 681px) {
	.scrhint { position: relative; min-width: 1100px; width: calc(50% + 50vw - 0px); }
}