@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://use.typekit.net/mzz3tbg.css');


button{
    border: none;
}
a{
    color: #004EA2;
    text-decoration: none;
    line-height: 1;
}
/* --------------------------------------------------

	変数定義

-------------------------------------------------- */
:root {
	/*
		色
	*/
	/* color */
	--cl-brand01: #004EA2;
	--cl-brand02: #007BC7;
	--cl-brand03: #EC6B81;
	
	--cl-brand01_20: rgb(from var(--cl-brand01) r g b / 0.2);
	--cl-brand01_65: rgb(from var(--cl-brand01) r g b / 0.65);
	
	--cl-gry01: #888888;
	--cl-gry02: #D9D9D9;
	
	--cl-gld01: #B67715;
	--cl-yel01: #A37F00;
	
	--cl-marker01: #FDFF95;
	
	--cl-bg01: #F7FAFF;
	--cl-bg02: #E9F3FF;
	--cl-bg03: #F6F6F1;
	--cl-bgPopup: rgb(from var(--cl-brand01) r g b / 0.5);
	
	--cl-line: #06C755;
	--cl-rakuten: #BF0000;
	--cl-yahoo: #FF0033;
	
	/* linear-gradient */
	--lg-blu01: linear-gradient(45deg, var(--cl-brand01), #009BFA);
	--lg-blu02: linear-gradient(to right, var(--cl-brand01), #379ACC);
	--lg-blu03: linear-gradient(to right, #0251D3, #2CB5FF 30%, #9FFCF9 70%, #D7FFF4);
	--lg-blu04: linear-gradient(45deg, #DCF0FF, #FFFFFF);
	
	--lg-pnk01: linear-gradient(45deg, #FF4767, #FF8C72);
	
	--lg-gld01: linear-gradient(35deg, var(--cl-gld01), #FBDB78 50%, var(--cl-gld01));
	
	
	/*
		フォント
	*/
	/* font-family */
	--ff-basic: 'Noto Sans JP', sans-serif;
	--ff-en: 'futura-pt', 'Noto Sans JP', sans-serif;
	
	/* font-size */
	--fs-basicNum: 14;
	--fs-smallerNum: 12;
	--fs-smallNum: 10;
	--fs-bigNum: 19;
	
	@media (width > 768px) {
		--fs-basicNum: 16;
		--fs-smallerNum: 14;
		--fs-smallNum: 12;
		--fs-bigNum: 28;
	}
	
	--fs-basic: calc(var(--fs-basicNum) * 1px);
	--fs-smaller: calc(var(--fs-smallerNum) * 1px);
	--fs-small: calc(var(--fs-smallNum) * 1px);
	--fs-big: calc(var(--fs-bigNum) * 1px);
	
	/* font-weight */
	--fw-regular: 400;
	--fw-book: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	
	/* letter-spacing */
	--ls-basic: 0.05em;
	
	/* line-height */
	--lh-basic: 2.0;
	--lh-small: 1.3;
	--lh-smaller: 1.8;
	
	
	/*
		幅・余白
	*/
	/* width */
	--w-tblPlainCell: 124px;
	--w-tblCompareCell: 94px;

	@media (width <= 768px) {
		--w-designNum: 414;
	}
	@media (width > 768px) {
		--w-contentsNum: 1000;
		--w-contentsNarrowNum: 800;
		--w-contentsWideNum: 1200;
		
		--w-contents: calc(var(--w-contentsNum) * 1px);
		--w-contentsNarrow: calc(var(--w-contentsNarrowNum) * 1px);
		--w-contentsWide: calc(var(--w-contentsWideNum) * 1px);

		--w-tblPlainCell: 240px;
		--w-tblCompareCell: 240px;
	}
	
	/* padding */
	--pd-h: 5dvw;
	
	--pd-vSec: 100px;
	--pd-vGroup: 40px;
	--pd-vItem: 24px;
	--pd-vSmall: 10px;

	--pd-tblH: 10px;
	--pd-tblV: 16px;
	
	@media (width > 768px) {
		--pd-hNum: 50;
		
		--pd-h: calc(var(--pd-hNum) * 1px);
	
		--pd-vSec: 120px;
		--pd-vGroup: 60px;
		--pd-vItem: 40px;
		--pd-vSmall: 12px;
		
		--pd-tblH: 20px;
	}
	
	
	/*
		装飾
	*/
	/* border-radius */
	--br-basic: 12px;
	--br-small: 6px;
	
	@media (width > 768px) {
		--br-basic: 16px;
		--br-small: 8px;
	}
	
	/* box-shadow */
	--bs-basic: 0 0 20px 0 var(--cl-brand01_20);
	--bs-narrow: 0 0 6px 0 var(--cl-brand01_65);
	
	--bs-basic-filter: 0 0 20px var(--cl-brand01_20);
	--bs-narrow-filter: 0 0 6px var(--cl-brand01_65);
	
	/* text-shadow */
	--ts-basic: 0 0 6px var(--cl-brand01_65);
	
	/* transition */
	--tr-basic: all 300ms ease;
	
	--tr-opacity: 0.7;
}



.counseling-block-custom .container {
    background: linear-gradient(45deg, #DCF0FF, #FFFFFF);
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
    padding: 50px 0 50px;
}

.counseling-block-custom .details.splide {
    margin: 0 calc(var(--pd-h) * -1);
}

.counseling-block-custom .splide__track {
    overflow: clip visible;
}

.counseling-block-custom .splide__slide {
    display: flex !important; 
    justify-content: center;
    width: auto !important; 
}

.counseling-block-custom .detail {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap:40px;
    width: 220px;
    flex-shrink: 0; 
    aspect-ratio: 220 / 270;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:  0 0 20px 0 rgb(from #004EA2 r g b / 0.2);
}

@media (min-width: 769px) {
    .counseling-block-custom .detail {
        gap:40px;
        width: 300px!important;
        flex-shrink: 0; 
        aspect-ratio: 300 / 345;
    }
}
.counseling-block-custom .detail::before {
    content: '';
    flex: 0 0 auto;
    display: block;
    width: 100%;
    aspect-ratio: 220 / 130;
    background: no-repeat center / cover;
}

@media (min-width: 769px) {
    .counseling-block-custom .detail::before {
        aspect-ratio: 300 / 178;
    }
}

.counseling-block-custom .detail.color::before {
    background-image: url("/news/wp-content/themes/news-list/assets/images/counseling/img_counseling_measurement_sp.webp");
}
@media (min-width: 769px) {
    .counseling-block-custom .detail.color::before {
        background-image: url("/news/wp-content/themes/news-list/assets/images/counseling/img_counseling_measurement_pc.webp");
    }
}

.counseling-block-custom .detail.simulation::before {
    background-image: url("/news/wp-content/themes/news-list/assets/images/counseling/img_counseling_simulation_sp.webp");
}
@media (min-width: 769px) {
    .counseling-block-custom .detail.simulation::before {
        background-image: url("/news/wp-content/themes/news-list/assets/images/counseling/img_counseling_simulation_pc.webp");
    }
}

.counseling-block-custom .detail.microscope::before {
    background-image: url("/news/wp-content/themes/news-list/assets/images/counseling/img_counseling_microscope_sp.webp");
}
@media (min-width: 769px) {
    .counseling-block-custom .detail.microscope::before {
        background-image: url("/news/wp-content/themes/news-list/assets/images/counseling/img_counseling_microscope_pc.webp");
    }
}

.counseling-block-custom .detail .textArea {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
}

@media (min-width: 769px) {
    .counseling-block-custom .detail .textArea {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.counseling-block-custom .detail .title {
    font-weight: bold;
}

.counseling-block-custom .detail .text {
    font-size: 16px;
    line-height: 160%;
}

.counseling-block-custom .description {
    margin-top: 50px;
    font-size: 16px;
    padding: 0 50px 0;
}

.counseling-block-custom .description::after {
    content: '';
    display: block;
    aspect-ratio: 330 / 220;
    margin-top: var(--pd-vItem);
    background: url("/news/wp-content/themes/news-list/assets/images/counseling/img_counseling_non_sp.webp") no-repeat center / cover;
    border-radius: 10px;
    margin-top: 50px;
}

@media (min-width: 769px) {
    .counseling-block-custom .description::after {
        aspect-ratio: 900 / 400;
        background-image: url("/news/wp-content/themes/news-list/assets/images/counseling/img_counseling_non_pc.webp");
        margin-top: 50px;
    }
}

.counseling-block-custom .reserve {
    margin-top: 50px;
}


.counseling-block-custom .paginationStyle01 {
    --gap: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:50px;
    margin-top: 50px; 
}

.counseling-block-custom .paginationStyle01 .splide__arrow {
    position: relative;
    inset: auto;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.counseling-block-custom .paginationStyle01 .splide__arrow::before {
    content: '';
    flex: 0 0 auto;
    display: block;
    width: 10px;
    aspect-ratio: 1;
    border: 1px #004ea2;
    border-style: solid none none solid;
    rotate: -45deg;
    translate: 20% 0;
}

.counseling-block-custom .paginationStyle01 .splide__arrow .text {
    display: inline-block;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
}

.counseling-block-custom .paginationStyle01 .splide__arrow.splide__arrow--next {
    scale: -1 1;
}

.counseling-block-custom .paginationStyle01 .splide__pagination {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
}

.counseling-block-custom .paginationStyle01 .splide__pagination li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.counseling-block-custom .paginationStyle01 .splide__pagination__page {
    display: block;
    width: 8px;
    aspect-ratio: 1;
    background: #D9D9D9;
    border-radius: 50%;
    border: none;
    padding: 0;
    opacity: 1;
    margin: 0;
    cursor: pointer;
}

.counseling-block-custom .paginationStyle01 .splide__pagination__page.is-active {
    background: #004ea2;
    transform: none; 
}

@media (min-width: 769px) {
    .counseling-block-custom .paginationStyle01.big {
        gap: 24px;
    }
    
    .counseling-block-custom .paginationStyle01.big .splide__pagination__page {
        width: 12px;
    }
}

.counseling-block-custom .splide__pagination {
    display: flex !important; 
}

.counseling-block-custom .splide__arrows {
    display: flex !important;
}

/*
	ボタン
*/
/* 汎用ボタン基本設定 */
.btnBasic {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 318px;
    max-width: 100%;
    height: 56px; /* SPサイズ */
    margin: 0 auto;
    background: var(--lg-blu01) no-repeat center / cover;
    border-radius: 28px; /* 56px / 2 */
    color: #fff;
    font-family: var(--ff-basic);
    font-size: min(var(--fs-basic), calc(var(--fs-basicNum) * 100dvw / var(--w-designNum)));
    font-weight: var(--fw-bold);
    line-height: var(--lh-basic);
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.3s;
}

.btnBasic:hover {
    opacity: 0.8;
}

/* 矢印アイコン */
.btnBasic::after {
    content: '';
    display: block;
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    aspect-ratio: 1;
    border: 1px currentColor;
    border-style: solid solid none none;
    transform: translateY(-50%) rotate(45deg);
}

/* CTAボタン（ピンク） */
.btnBasic.cta {
    background: linear-gradient(45deg, #FF4767, #FF8C72);
}

/* 濃い背景用ボタン */
.btnBasic.darkBg {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #fff;
}

/* PCサイズ調整 (769px以上) */
@media screen and (min-width: 769px) {
    .btnBasic {
        --height-pc: 64px;
        width: 366px;
        height: var(--height-pc);
        border-radius: 32px; /* 64px / 2 */
        font-size: var(--fs-basic);
    }

    .btnBasic::after {
        right: 20px;
    }
}


/*
	タイトル
*/
/* セクションタイトル基本設定 */
.ttlSection {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 19px;
    margin-bottom: 40px;
    color: var(--cl-brand01);
    font-family: var(--ff-en);
    font-size: min(var(--fs-big), calc(var(--fs-bigNum) * 100dvw / var(--w-designNum)));
    font-weight: var(--fw-medium);
    line-height: var(--lh-smaller);
    text-align: center;
    white-space: nowrap;
}

/* タイトル前後の装飾アイコン */
.ttlSection::before,
.ttlSection::after {
    content: '';
    flex: 0 0 auto;
    display: block;
    width: 18px;
    aspect-ratio: 18 / 37;
    background: url(/common/images/img_diamond.webp) no-repeat center / contain;
}

/* テキスト部分 */
.ttlSection .text {
    flex: 0 0 auto;
    display: block;
}

/* 小さめ行の設定 */
.ttlSection .smaller {
    display: inline-block;
    font-size: min(var(--fs-basic), calc(var(--fs-basicNum) * 100dvw / var(--w-designNum)));
    line-height: var(--lh-basic);
}

/* PCサイズ調整 (769px以上) */
@media screen and (min-width: 769px) {
    .ttlSection {
        gap: 30px;
        margin-bottom: 90px;
        font-size: var(--fs-big);
    }

    .ttlSection::before,
    .ttlSection::after {
        width: 32px;
    }

    .ttlSection .smaller {
        font-size: var(--fs-basic);
    }
}

.ttlSection{
    margin: 30px auto 80px!important;
    border-left: 0!important;
}