/*
Theme Name: 保育士フィット
Description: 保育士フィット のテーマ
Theme URI: http://hoikushi-fit.com/
Version: 1.0
Author:	株式会社GRACE
License: GPL
License URI: https://www.gnu.org/copyleft/gpl.html
*/
.pc-only{
    display: none;
}
.pc-tb-only{
    display: none;
}
.sp-only{
    display: inline-block;
}
main .mv{
    background-color: #d2e1e6;
    background-image: url(images/mv_back-image.jpg);
    background-image: image-set(url(images/mv_back-image.jpg) 1x, url(images/mv_back-image@2x.jpg) 2x);
    background-image: -webkit-image-set(url(images/mv_back-image.jpg) 1x, url(images/mv_back-image@2x.jpg) 2x);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
@media screen and (min-width:751px) {
    main .mv{
        background-image: url(images/mv_back-image_pc.jpg);
        background-image: image-set(url(images/mv_back-image_pc.jpg) 1x, url(images/mv_back-image_pc@2x.jpg) 2x);
        background-image: -webkit-image-set(url(images/mv_back-image_pc.jpg) 1x, url(images/mv_back-image_pc@2x.jpg) 2x);
        width: 100%;
    }
}
.problem__list{
    position: relative;
    top:0;
    width: 100%;
    padding-top: 8.53%;
    padding-bottom: calc(10vw + 10px);  
    overflow: hidden;
    background-image: url(images/problem_back-image.png);
    background-image: image-set(url(images/problem_back-image.png) 1x, url(images/problem_back-image@2x.png) 2x);
    background-image: -webkit-image-set(url(images/problem_back-image.png) 1x, url(images/problem_back-image@2x.png) 2x);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 4;
}
@media screen and (min-width:751px) {
.problem__list{
    padding-top: 7%;
    background: url(images/problem_back-image_pc.png);
    background-image: image-set(url(images/problem_back-image_pc.png) 1x, url(images/problem_back-image_pc@2x.png) 2x);
    background-image: -webkit-image-set(url(images/problem_back-image_pc.png) 1x, url(images/problem_back-image_pc@2x.png) 2x);    
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
}
.inner{
    max-width: 1200px; 
}
.font-size-14{
    font-size: 1.866666666666667vw;
}
.font-size-18{
    font-size: 2.4vw;
}
.font-size-20{
    font-size: 2.666666666666667vw;
}
.font-size-22{
    font-size: 2.933333333333333vw;
}
.font-size-24{
    font-size: 3.2vw;
}
.font-size-28{
    font-size: 3.733333333333334vw;
}
.font-size-32{
    font-size: 4.266666666666667vw;
}
.font-size-36{
    font-size: 4.8vw;
    font-weight: 400;
    line-height: 1.1;
}
.font-size-40{
    font-size: 5.333333333333334vw;
}
.font-size-44{
    font-size: 5.866666666666666vw;
}
.font-size-47{
    font-size: 6.4vw;
    font-weight: 800;
    line-height: 1.7;
}
.font-size-48{
    font-size: 6.4vw;
}
.font-size-56{
    font-size: 7.466666666666668vw;
}
.font-size-60{
    font-size: 6.4vw;
    font-weight: 900;
    line-height: 1.33;
}
.font-size-70{
    font-size: 9.333333333333334vw;
}
.font-size-72{
    font-size: 9.6vw;
}
.font-size-74{
    font-size: 9.866666666666667vw;
}
.font-size-82{
    font-size: 10.933333333333334vw;
}
.font-size-84{
    font-size: 11.200000000000001vw;
}
.font-size-132{
    font-size: 17.599999999999998vw;
}
.font-size-141{
    font-size: 18.8vw;
}
.font-color-white{
    color:#ffffff;
}
.font-color-blue{
    color: #093f90;
}
.font-color-blue02{
    color: #0048a5;
}
.font-color-blue03{
    color: #2e6299;
}
a:hover{
    opacity: 0.5;
}
p,h2,h3,dl,li,a{
    font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
}
@media screen and (min-width:751px) {
    .pc-only{
        display: none;
    }
    .pc-tb-only{
        display: inline-block;
    }
    .sp-only{
        display: none;
    }
    .font-size-14{
        font-size: 1.1666666666666667vw;
    }
    .font-size-18{
        font-size: 1.5vw;
    }
    .font-size-20{
        font-size: 1.6666666666666667vw;
    }
    .font-size-22{
        font-size: 1.8333333333333333vw;
    }
    .font-size-24{
        font-size: 2vw;
    }
    .font-size-28{
        font-size: 2.3333333333333335vw;
    }
    .font-size-32{
        font-size: 2.666666666666667vw;
    }
    .font-size-36{
        font-size: 3vw;
    }
    .font-size-40{
        font-size: 3.3333333333333335vw;
    }
    .font-size-44{
        font-size: 3.6666666666666665vw;
    }
    .font-size-47{
        font-size: 3.916666666666667vw;
    }
    .font-size-48{
        font-size: 4vw;
    }
    .font-size-56{
        font-size: 4.666666666666667vw;
    }
    .font-size-60{
        font-size: 5vw;
    }
    .font-size-70{
        font-size: 5.833333333333333vw;
    }
    .font-size-72{
        font-size: 6vw;
    }
    .font-size-74{
        font-size: 6.166666666666667vw;
    }
    .font-size-82{
        font-size: 6.833333333333333vw;
    }
    .font-size-84{
        font-size: 7.000000000000001vw;
    }
    .font-size-132{
        font-size: 11vw;
    }
    .font-size-141{
        font-size: 11.75vw;
    }
}
@media screen and (min-width:1200px) {
    .pc-only{
        display: inline-block;
    }
    .sp-only{
        display: none;
    }
    .font-size-14{
        font-size: 14px;
    }
    .font-size-18{
        font-size: 18px;
    }
    .font-size-20{
        font-size: 20px;
    }
    .font-size-22{
        font-size: 22px;
    }
    .font-size-24{
        font-size: 24px;
    }
    .font-size-28{
        font-size: 28px;
    }
    .font-size-32{
        font-size: 32px;
    }
    .font-size-36{
        font-size: 36px;
    }
    .font-size-40{
        font-size: 40px;
    }
    .font-size-44{
        font-size: 44px;
    }
    .font-size-47{
        font-size: 47px;
    }
    .font-size-48{
        font-size: 48px;
    }
    .font-size-56{
        font-size: 56px;
    }
    .font-size-60{
        font-size: 60px;
    }
    .font-size-70{
        font-size: 70px;
    }
    .font-size-72{
        font-size: 72px;
    }
    .font-size-74{
        font-size: 74px;
    }
    .font-size-82{
        font-size: 82px;
    }
    .font-size-84{
        font-size: 84px;
    }
    .font-size-132{
        font-size: 132px;
    }
    .font-size-141{
        font-size: 141px;
    }
}

/* header */
.header__contact-fixed{
    width: 100%;
    /* height: 11.83%; */
    box-sizing: border-box;
    padding-top: 1.67%;
    padding-bottom: 2.5%;
    display: block;
    background-color: #93c9f0;
    position: fixed;
    top: 0;
    z-index: 200;
}
header div.header__inner{
    padding: 0 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
header div.header__inner h1{
    /* max-width: 284px; */
    width:43%;
    margin-right: 27%;
}
header div.header__inner h1 a{
    display: flex;
    align-items: flex-end;
}
header div.header__inner h1 img{
    width: 100%;
    height: auto;
}
header div.header__inner h1 span{
    display: inline-block;
    width: 100%;
    text-align: center;
    align-content: center;
    margin: 0 0 0 2vw;
    padding: 2%;
    height: fit-content;

    color: #FFF;
    background-color: #0027a2;
    
    font-weight: bold;
    font-size: 2.8vw;
    white-space: nowrap;
    line-height: 1.2em;
}
header .header__contact-button{
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    /* max-width: 192px; */
    width:25%;
    /* aspect-ratio: 190/90; */
}
header .header__contact-button p{
    font-weight: 600;
}
header .header__contact-button-tel{
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width:90px;
    max-height: 90px; */
    width: 46.6%;
    height: auto;
    aspect-ratio: 1/1;
    background-color: #57b327;
    border-radius: 3px;
    box-shadow: -3px 3px 10px hsla(0, 0%, 0%, 0.2);
}
header .header__contact-button-tel:hover{
    box-shadow: none;
    transform: translateX(3px);
    transform: translateY(3px);
}
header .header__contact-button-tel img{
    width:50%;
    height: auto;
}
header .header__contact-button-tel p{
    line-height: 0.6;
    word-wrap: nowrap;
}
header .header__contact-button-form{
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width:90px;
    max-height: 90px; */
    width: 46.6%;
    height: auto;
    aspect-ratio: 1/1;
    background-color: #ed8310;
    border-radius: 3px;
    box-shadow: -3px 3px 10px hsla(0, 0%, 0%, 0.2);
}
header .header__contact-button-form:hover{
    box-shadow: none;
    transform: translateX(3px);
    transform: translateY(3px);
}
header .header__contact-button-form__item{
    display: flex;
    justify-content: center;
}
header .header__contact-button-form__item picture{
    width: 77%;
    height: auto;
    margin: 0 auto;
}
header .header__contact-button-form__item p{
    font-weight: 600;
}
/* header end */
@media screen and (min-width:751px) {
    .header__contact-fixed{
        height: auto;
        padding-top: 2%;
        padding-bottom: 2%;
    }
    header div.header__inner{
        padding: 0 2%;
        /* width: 86%; */
        height: 6%;
    }
    header div.header__inner h1{
        width: 24%;
        margin-right: 0;
    }
    header div.header__inner h1 a{
        display: block;
    }
    header div.header__inner h1 a span{
        margin: 10px 0 0 0;
        font-size: 1.8vw;
    }
    header .header__contact-button p.font-size-28{
        font-size: 2.3333333333333335vw;
    }
    header .header__contact-button .font-size-14{
        font-size: 1.1666666666666667vw;
    }
    header .header__contact-button{
        max-width: 515px;
        width: auto;
    }
    header .header__contact-button-tel{
        text-wrap:nowrap;
        max-width:320px;
        max-height: 68px;
        width:320px;
        height: 68px;
        /* width: 100%;
        aspect-ratio: auto; */
        /* padding: 12px 34px 10px; */
        border: 2px solid #57b327;
        border-radius: 34px;
        box-shadow: -3px 3px 10px hsla(0, 0%, 0%, 0.2);
        margin-right: 17px;
    }
    header .header__contact-button-tel:hover{
        box-shadow: none;
        transform: translateX(20px);
        transform: translateY(3px);
    }
    header .header__contact-button-tel img{
        width: 26px;
        margin-right:5px;
    }
    header .header__contact-button-form{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-wrap:nowrap;
        max-width: 170px;
        max-height: 68px;
        width: 170px;
        height: 68px;
        /* aspect-ratio: 170/68; */
        border: 2px solid #ed8310;
        /* padding: 12px 34px 10px; */
        border-radius: 34px;
        box-shadow: -3px 3px 10px hsla(0, 0%, 0%, 0.2);
    }
    header .header__contact-button-form__item{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    header .header__contact-button-form__item .pc-only.font-color-white.font-size-28{
        line-height: normal;
    }
    header .header__contact-button-form__item img,header .header__contact-button-form__item picture{
        max-width:33px;
        height: auto;
        aspect-ratio: 33/24;
    }
    header .header__contact-button-form__item picture{
        margin: 0;
    }
}
@media screen and (min-width:1200px) {
    .header__contact-fixed{
        padding-top: 25px;
        padding-bottom: 28px;
    }
    header div.header__inner{
        padding: 0 16%;
    }
    header div.header__inner h1 a span{
        font-size: 1.3vw;
    }
    header .header__contact-button p.font-size-28{
        font-size: 28px;
    }
    header .header__contact-button .font-size-14{
        font-size: 14px;
    }
}
/* front-page */
main{
    margin-top:16.7%;/*header分*/
}
/*main .mvのcss読み込み速度改善のため上に記入してあります*/
main .mv__inner{
    max-width: 1140px; 
    position: relative;
}
main .mv picture source,main .mv picture img{
    width: 100%;
    height: auto;
    padding-top:7%;
    margin-bottom:-0.5%;
    right: 0;
}
@media screen and (min-width:751px) {
    main{
        margin-top:9.7%;/*header分*/
    }
    /*main .mvのcss読み込み速度改善のため上に記入してあります*/
    main .mv__inner{
        aspect-ratio: 1140/729;
        margin: 0 auto;
    }
    main .mv picture source,main .mv picture img{
        padding-top:0;
        aspect-ratio: 1140/776;
        z-index: 300;
        margin: 0 auto;
        top:0;
        bottom: 0;
    }
}
@media screen and (min-width:1200px) {
    main{
        margin-top:120px;
    }
    main .mv__inner{
        margin: 0 auto;
    }
}

    /*.problem .problem__list*/
        /*problem__listのcss読み込み速度改善のため上に記入してあります*/
.problem__list__example{
    position: relative;
    text-align: center;
    margin: 0 auto;
    padding: 17% 0 11%;
    max-width: 86%;
    background-color: #fff;
    box-shadow: 0px 10px 10px hsla(0, 0%, 0%, 0.08);
}
.problem__list__example__h2--before{
    position:relative;
	width:105px; /* 直径 */
    right:52.5px;/* 半径 */
	font-size: 2.4vw;
	text-align: center;
	margin: 0 auto;
	transform: rotate(-80deg); /* 円の回転 */
}
.problem__list__example__h2--before span {
	position: absolute;
	top: 0;
	left: calc(50% - 18px); /* 中心点、、文字サイズ分ずらす */
	display: inline-block;
	width: 18px; /* 文字サイズより小さくしない */
	height: 52.5px; /* 半径 */
	transform-origin: center bottom; /* 回転の基準点 */
}
.problem__list__example__h2--before span:first-child{
	transform: rotate(45deg);
}
.problem__list__example__h2--before span:nth-child(2) {
	transform: rotate(57deg);
}
.problem__list__example__h2--before span:nth-child(3) {
	transform: rotate(67deg);
}
.problem__list__example__h2--before span:nth-child(4) {
	transform: rotate(80deg);
}
.problem__list__example__h2--before span:nth-child(5) {
	transform: rotate(90deg);
}
.problem__list__example__h2--before span:nth-child(6) {
	transform: rotate(101deg);
}
.problem__list__example__h2--before span:nth-child(7) {
	transform: rotate(116deg);
}
.problem__list__example__h2{
    padding-top: 2.6%;
    width: 62%;
    margin: 0 auto;
}
.problem__list__example ul{
    margin-top:6.78%;
}
.problem__list__example ul li{
    list-style: none;
    display: flex;
    align-items: center;
    font-weight: 400;
    line-height: 1.25;
}
.problem__list__example ul li:first-child{
    position: relative;
    left:6.15%;
    width: 85%;
}
.problem__list__example ul li:nth-child(2){
    position: relative;
    margin-top:-6.15%;
    left:20.77%;
    width: 76.46%;
}
.problem__list__example ul li:nth-child(3){
    position: relative;
    margin-top:-6.46%;
    left:3%;
    width: 80.5%;
}
.problem__list__example ul li:last-child{
    position: relative;
    margin-top:-5.85%;
    left:13.85%;
    width: 75%;
}
.problem__list__example-decoration01,.problem__list__example-decoration02,.problem__list__example-decoration03,.problem__list__example-decoration04{
    display: inline-block;
    width: 16.7px;
    height: 16.7px;
    border-radius: 50%;
}
.problem__list__example-decoration{
    position: absolute;
    right: 48.3%;
    /* bottom: -2.9%; */
    bottom: -3.5%;
    display: flex;
    flex-direction: column;
}
.problem__list__example-decoration01{
    margin:0 0 24%;
    background-color:#0a3f90;
}
.problem__list__example-decoration02{
    margin:24% 0;
    background-color:#0d579d;
}
.problem__list__example-decoration03{
    margin:24% 0;
    background-color:#106ca9;
}
.problem__list__example-decoration04{
    margin:24% 0 0;
    background-color:#158cbb;
}
    /*.problem .problem__solution*/
.problem__solution{
    margin-top: 8%;
    padding-bottom: 92%;
    display: flex;
    flex-direction: column;
}
.problem__solution--text01{
    margin: 0 auto;
    text-align: center;
    position: relative;
    text-shadow:0px 6px 0px rgba(255, 255, 255, 0.6);
}
.problem__solution--text01::before{
    position:absolute;
    content:"すべての解決策は";
    font-size: 6.4vw;
    font-weight:900;
    line-height: 1.33;
    left: 0;
    right: 0;
    text-align: center;
    background: linear-gradient(90deg, #08368b,#1797c1);
    background: -webkit-linear-gradient(0deg, #08368b,#1797c1);
    -webkit-background-clip: text;
    text-shadow: none;
    -webkit-text-fill-color: transparent;
}
.problem__solution--text02{
    margin: 0 auto;
    text-align: center;
    position: relative;
    text-shadow:0px 3px 0px rgba(255, 255, 255, 0.6);
}
.problem__solution--text02::before{
    position: absolute;
    content:"職員不足の解消にあった!!";
    font-size: 6.4vw;
    font-weight:900;
    line-height: 1.33;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #08368b,#1797c1);
    background: -webkit-linear-gradient(0deg, #08368b,#1797c1);
    -webkit-background-clip: text;
    text-shadow: none;
    -webkit-text-fill-color: transparent;
}
@media screen and (min-width:375px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 9px); /* 中心点、、文字サイズ分ずらす */
        width: 9px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:390px) {
    .problem__list__example{
        padding-bottom: 62.5px;
    }
}/*iphone13pro対応*/
@media screen and (min-width:400px) {
    .problem__list__example{
        padding-bottom: 11%;
    }
}
@media screen and (min-width:416px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 10px); /* 中心点、、文字サイズ分ずらす */
        width: 10px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:458px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 11px); /* 中心点、、文字サイズ分ずらす */
        width: 11px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:499px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 12px); /* 中心点、、文字サイズ分ずらす */
        width: 12px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:500px) {
    .problem__list__example-decoration01,.problem__list__example-decoration02,.problem__list__example-decoration03,.problem__list__example-decoration04{
        width: 25px;
        height: 25px;
    }
}
@media screen and (min-width:600px) {
    .problem__list__example-decoration01,.problem__list__example-decoration02,.problem__list__example-decoration03,.problem__list__example-decoration04{
        width: 18px;
        height: 18px;
    }
}
@media screen and (min-width:540px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 13px); /* 中心点、、文字サイズ分ずらす */
        width: 13px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:582px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 14px); /* 中心点、、文字サイズ分ずらす */
        width: 14px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:624px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 15px); /* 中心点、、文字サイズ分ずらす */
        width: 15px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:665px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 16px); /* 中心点、、文字サイズ分ずらす */
        width: 16px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:707px) {
    .problem__list__example__h2--before span {
        left: calc(50% - 17px); /* 中心点、、文字サイズ分ずらす */
        width: 17px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:751px) {
    /*problem__listのcss読み込み速度改善のため上に記入してあります*/
    .problem__list__example{
        border-radius: 10px;
        max-width: 79%;
        padding: 106px 0;
    }
    .problem__list__example__h2{
        max-width:48%; 
    }
    .problem__list__example__h2--before{
        font-size: 18px;
    }
    .problem__list__example__h2--before span:first-child{
    	transform: rotate(35deg);
    }
    .problem__list__example__h2--before span:nth-child(2) {
	    transform: rotate(50deg);
    }
    .problem__list__example__h2--before span:nth-child(3) {
	    transform: rotate(64deg);
    }
    .problem__list__example__h2--before span:nth-child(4) {
	    transform: rotate(80deg);
    }
    .problem__list__example__h2--before span:nth-child(5) {
	    transform: rotate(93deg);
    }
    .problem__list__example__h2--before span:nth-child(6) {
	    transform: rotate(107deg);
    }
    .problem__list__example__h2--before span:nth-child(7) {
    	transform: rotate(126deg);
    }
    .problem__list__example ul li{
        justify-content: center;
    }
    .problem__solution{
        padding-bottom: 41.67%;
    }
    .problem__solution--text02{
        text-shadow:0px 6px 0px rgba(255, 255, 255, 0.6);
    }
    .problem__solution--text01,.problem__solution--text02{
        font-size: 4vw;
    }
    .problem__solution--text01::before,.problem__solution--text02::before{
        font-size: 4vw;
    }
    .problem__list__example ul{
        margin-top: 6.75%;
    }
    .problem__list__example ul li:first-child{
        width: 46%;
        left:11%;
    }
    .problem__list__example ul li:nth-child(2){
        margin-top: -6.6%;
        width: 41%;
        left:58.1%;
    }
    .problem__list__example ul li:nth-child(3){
        margin-top: -6.75%;
        width: 44%;
        left:7.4%;
    }
    .problem__list__example ul li:last-child{
        margin-top: -6.53%;
        width: 41%;
        left:33.5%;
    }
    .problem__list__example-decoration{
        bottom: -8.9%;
    }
}
@media screen and (min-width:752px) {
    .problem__list__example-decoration01,.problem__list__example-decoration02,.problem__list__example-decoration03,.problem__list__example-decoration04{
        width: 16px;
        height: 16px;
    }
}
@media screen and (min-width:1200px) {
    .problem__list__example{
        max-width: 950px;
    }
    .problem__solution{
        margin-top: 96px;
        padding-bottom: 500px;
    }
    .problem__solution--text01,.problem__solution--text02{
        font-size: 48px;
    }
    .problem__solution--text01::before,.problem__solution--text02::before{
        font-size: 48px;
    }
    .problem__list__example-decoration01,.problem__list__example-decoration02,.problem__list__example-decoration03,.problem__list__example-decoration04{
        width: 25px;
        height: 25px;
    }
}
    /*.problem .problem__solution-practice*/
.problem__solution-practice{
    width: 100%;
    position: relative;
    margin-top:-23%;
    padding-top: 29%;
    padding-bottom: 28.5%;
    text-align: center;
    background-image: url(images/problem__solution-practice__back-image.png);
    /* background-image: image-set(url(images/problem__solution-practice__back-image.png) 1x, url(images/problem__solution-practice__back-image@2x.png) 2x);
    background-image: -webkit-image-set(url(images/problem__solution-practice__back-image.png) 1x, url(images/problem__solution-practice__back-image@2x.png) 2x);     */
    background-size: cover;
    background-position: bottom;
    z-index: 3;
}
.problem__solution-practice span{
    text-shadow:0px 10px 10px rgba(255, 255, 255, 0.1);
}
@media screen and (min-width:751px) {
    .problem__solution-practice{
        margin-top: -8%;
        padding-top: 18.75%;
        padding-bottom: 11.5%;
        background-image: url(images/problem__solution-practice__back-image_pc.png);
        /* background-image: image-set(url(images/problem__solution-practice__back-image_pc.png) 1x,url(images/problem__solution-practice__back-image_pc@2x.png) 2x);
        background-image: -webkit-image-set(url(images/problem__solution-practice__back-image_pc.png) 1x,url(images/problem__solution-practice__back-image_pc@2x.png) 2x);     */
        background-size: cover;
        background-position: bottom;
    }
    .problem__solution-practice span{
        font-size:4vw;
    }
}
@media screen and (min-width:1200px) {
        .problem__solution-practice span{
        font-size:48px;
    }
}
    /*.problem .problem__solution-result*/
.problem__solution-result{
    position: relative;
    margin-top:-23%;
    width: 100%;
    text-align: center;
    z-index: 2;
}
@media screen and (min-width:751px) {
    .problem__solution-result{
        margin-top: -7%;
    }
}
/* .problem .problem__reason__inner */
.problem__reason{
    margin-top: -23%;
    padding-top: 23%;
    background: url(images/problem__reason-back-image.jpg);
    background-image: image-set(url(images/problem__reason-back-image.jpg) 1x, url(images/problem__reason-back-image@2x.jpg) 2x);
    background-image: -webkit-image-set(url(images/problem__reason-back-image.jpg) 1x, url(images/problem__reason-back-image@2x.jpg) 2x);  
    position: relative;
}
.problem__reason__inner{
    width: 87%;
    margin: 0 auto;
}
.problem__reason__inner--first-text{
    padding-top: 8.2%;
    padding-bottom: 11%;
    line-height: 1.5;
}
.problem__reason__comparison{
    margin: 0 auto;
    max-width: 650px;
    width:87%;
}
.problem__reason__comparison div:first-child,.problem__reason__comparison div:nth-child(2){
    margin-bottom: 3%;
}
.problem__reason--last-text{
    text-align: center;
    padding:6.7% 0 52%; 
}
.problem__reason--last-text picture img{
    width: 110%;
}
.problem__reason--decoration01,.problem__reason--decoration02,.problem__reason--decoration03,.problem__reason--decoration04{
    display: inline-block;
    width: 16.7px;
    height: 16.7px;
    border-radius: 50%;
}
.problem__reason--decoration{
    position: absolute;
    right: 48.3%;
    bottom: 8%;
    display: flex;
    flex-direction: column;
    z-index: 100;
}
.problem__reason--decoration01{
    margin:0 0 24%;
    background-color:#0a3f90;
}
.problem__reason--decoration02{
    margin:24% 0;
    background-color:#0d579d;
}
.problem__reason--decoration03{
    margin:24% 0;
    background-color:#106ca9;
}
.problem__reason--decoration04{
    margin:24% 0 0;
    background-color:#158cbb;
}
@media screen and (min-width:390px) {
    .problem__reason--last-text{
        padding-bottom:240px; 
    }
    .problem__reason--decoration{
        bottom: 10%;
    }
}/*iphone13pro対応*/
@media screen and (min-width:400px) {
    .problem__reason--last-text{
        padding-bottom:52%; 
    }
    .problem__reason--decoration{
        bottom: 8%;
    }
}
@media screen and (min-width:500px) {
    .problem__reason--decoration01,.problem__reason--decoration02,.problem__reason--decoration03,.problem__reason--decoration04{
        width: 25px;
        height: 25px;
    }
}
@media screen and (min-width:600px) {
    .problem__reason--decoration01,.problem__reason--decoration02,.problem__reason--decoration03,.problem__reason--decoration04{
        width: 18px;
        height: 18px;
    }
}
@media screen and (min-width:751px) {
    .problem__reason{
        background: url(images/problem__reason-back-image_pc.jpg);
        background-image: image-set(url(images/problem__reason-back-image_pc.jpg) 1x, url(images/problem__reason-back-image_pc@2x.jpg) 2x);
        background-image: -webkit-image-set(url(images/problem__reason-back-image_pc.jpg) 1x, url(images/problem__reason-back-image_pc@2x.jpg) 2x);  
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom center;
        margin-top: -7%;
        padding-top: 7%;
    }
    .problem__reason__inner{
        max-width:1200px ;
        margin: 0 auto;
    }
    .problem__reason__inner--first-text{
        font-size:2vw;
        font-weight: 600;
        text-align: center;
        padding-top: 8.2%;
        padding-bottom: 5.5%;
    }
    .problem__reason__comparison{
        display: flex;
        max-width: 1200px;
        width: 100%;
    }
    .problem__reason__comparison div{
        max-width: 390px;
    }
    .problem__reason__comparison div:first-child,.problem__reason__comparison div:nth-child(2){
        margin-right: 1%;
        margin-bottom: 0;
    }
    .problem__reason--decoration{
        bottom: 13.8%;
        right: 49.3%;
    }
    .problem__reason--last-text{
        padding:5% 0 25%; 
    }
    .problem__reason--last-text picture img{
        width: 91.5%;
        max-width: 1098px;
    }
}
@media screen and (min-width:752px) {
    .problem__reason--decoration01,.problem__reason--decoration02,.problem__reason--decoration03,.problem__reason--decoration04{
        width: 16px;
        height: 16px;
    }
}
@media screen and (min-width:1200px) { 
    .problem__reason--decoration01,.problem__reason--decoration02,.problem__reason--decoration03,.problem__reason--decoration04{
        width: 25px;
        height: 25px;
    }
    .problem__reason--decoration{
        bottom: 13.8%;
    }
}
@media screen and (min-width:1201px) { 
    .problem__reason{
    background-size:cover;
    margin-top: -12%;
    padding-top: 12%;
    }
    .problem__reason__inner--first-text{
        font-size:24px;
    }
    .problem__reason--last-text{
        padding:64.8px 0 312px; 
    }
}
.problem__solution-result img{
    width: 100%;
}
.problem__agent{
    background-color: #fff;
    background-image: url(images/problem__agent-back-image.png);
    background-image: image-set(url(images/problem__agent-back-image.png) 1x, url(images/problem__agent-back-image@2x.png) 2x);
    background-image: -webkit-image-set(url(images/problem__agent-back-image.png) 1x, url(images/problem__agent-back-image@2x.png) 2x);  
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}
.problem__agent__graph{
    position: relative;
}
.problem__agent__graph dt{
    position:absolute;
    top: -15%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width:100%;
}
.problem__agent__graph dt img{
    width:86%;
}
.problem__agent__graph dd p{
    width: 88%;
    margin: 0 auto;
    padding-top: 72%;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.025em;
}
.problem__agent__graph dd p.font-size-28{
    letter-spacing: -0.025em;
}
.problem__agent__graph dd .font-color-blue02{
    font-weight: 600;
}
.problem__agent__conclusion{
    width: 86.7%;
    margin: 0 auto;
    padding-top: 8.8%;
    padding-bottom:93%;
    font-weight: 500;
    line-height: 1.5;
    text-shadow:1px  1px 0px #000000,
    -1px  1px 0px #000000,
     1px -1px 0px #000000,
    -1px -1px 0px #000000,
     1px  0px 0px #000000,
     0px  1px 0px #000000,
    -1px  0px 0px #000000,
     0px -1px 0px #000000,
     1px 2px 0px #000000,
     2px 1px 0px #000000,
     1px -2px 0px #000000,
    -2px 1px 0px #000000,
    -1px 2px 0px #000000,
    2px -1px 0px #000000,
    -1px -2px 0px #000000,
    -2px -1px 0px #000000,
     2px  2px 0px #000000,
    -2px  2px 0px #000000,
     2px -2px 0px #000000,
    -2px -2px 0px #000000,
     2px  0px 0px #000000,
     0px  2px 0px #000000,
    -2px  0px 0px #000000,
     0px -2px 0px #000000;
}
@media screen and (min-width:751px) {
    .problem__solution-result img{
        width: 160%;
        object-fit:contain;
    }
    .problem__agent{
        background-color: #fff;
        background-image: url(images/problem__agent-back-image_pc.png);
        background-image: image-set(url(images/problem__agent-back-image_pc.png) 1x, url(images/problem__agent-back-image_pc@2x.png) 2x);
        background-image: -webkit-image-set(url(images/problem__agent-back-image_pc.png) 1x, url(images/problem__agent-back-image_pc@2x.png) 2x);      
        background-repeat: no-repeat;
        background-position: bottom;
    }
    .problem__agent__graph dt{
        top:-12.67%;
        left: 30%;
        width: 40%;
    }
    .problem__agent__graph dd p,.problem__agent__graph dd p span{
        text-align: center;
        font-size: 2vw;
        line-height: 1.5;
    }
    .problem__agent__graph dd p{
        padding-top:33%;
        font-weight: 600;
    }
    .problem__agent__graph dd p span{
        font-weight: 800;
    }
    .problem__agent__conclusion{
        position: relative;
        width: 100%;
        padding-top:6%;
        padding-bottom: 11.7%;
        padding-left: 52.25%;
        font-size: 2.5vw;
        font-weight: 500;
    }
    .problem__agent__conclusion span.font-size-72{
        font-size:4vw;
        font-weight: 500;
    }
}
@media screen and (min-width:1200px) {
    .problem__agent__graph dd p,.problem__agent__graph dd p span{
        font-size: 24px;
    }
    .problem__agent__conclusion{
        font-size: 30px;
    }
    .problem__agent__conclusion span.font-size-72{
        font-size:48px;
    }
}
    /*adoption-example*/
.adoption-example{
    background: linear-gradient(-30deg, rgba(0, 120, 171, 0.4),rgba(212, 240, 255, 0.4)),url(images/adoption-example-back-image.png),image-set(url(images/adoption-example-back-image.png) 1x, url(images/adoption-example-back-image@2x.png) 2x);
    background: -webkit-linear-gradient(-30deg, rgba(0, 120, 171, 0.4),rgba(212, 240, 255, 0.4)),url(images/adoption-example-back-image@2x.png),-webkit-image-set(url(images/adoption-example-back-image.png) 1x, url(images/adoption-example-back-image@2x.png) 2x);
    background-size: contain;
    background-position-y: 23%;
    background-repeat: no-repeat;
}
.adoption-example__inner{
    position: relative;
    padding-top:20%;
    padding-bottom: 19%;
}
.adoption-example__inner .adoption-example__text01{
    position: absolute;
    margin-top:72%;
    left: 11%;
    font-weight: 800;
    letter-spacing: -0.05em;
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.adoption-example__inner .adoption-example__text01 .font-size-82{
    font-weight: 800;
    letter-spacing: -0.05em;
}
.adoption-example__inner .adoption-example__text01-blue{
    color: #284987;
}
.adoption-example__h2--before{
    position:relative;
	width:114px; /* 直径 */
    right:57px;/* 半径 */
	font-size: 2.4vw;
	text-align: center;
	margin: 0 auto;
	transform: rotate(-85deg); /* 円の回転 */
}
.adoption-example__h2--before span {
	position: absolute;
	top: 0;
	left: calc(50% - 18px); /* 中心点、、文字サイズ分ずらす */
	display: inline-block;
	width: 18px; /* 文字サイズより小さくしない */
	height: 57px; /* 半径 */
	transform-origin: center bottom; /* 回転の基準点 */
    color: #fff;
    font-weight: 400;
    text-shadow:0px  5px 5px rgba(0, 0, 0, 0.2);

}
.adoption-example__h2--before span:first-child{
    transform: rotate(36deg);
}
.adoption-example__h2--before span:nth-child(2) {
    transform: rotate(50deg);
}
.adoption-example__h2--before span:nth-child(3) {
    transform: rotate(64deg);
}
.adoption-example__h2--before span:nth-child(4) {
    transform: rotate(75deg);
}
.adoption-example__h2--before span:nth-child(5) {
	transform: rotate(85deg);
}
.adoption-example__h2--before span:nth-child(6) {
	transform: rotate(90deg);
}
.adoption-example__h2--before span:nth-child(7) {
	transform: rotate(102deg);
}
.adoption-example__h2--before span:nth-child(8) {
    transform: rotate(110deg);
}
.adoption-example__h2--before span:nth-child(9) {
    transform: rotate(120deg);
}
.adoption-example__h2--before span:last-child {
    transform: rotate(133deg);
}
.adoption-example__h2{
    padding: 3% 0 13%;
    text-align: center;
    font-weight: 600;
    text-shadow:0px  5px 5px rgba(0, 0, 0, 0.2);
}
.adoption-example__text01{
    text-align: center;
    font-weight: 800;
    text-shadow:0px  5px 5px rgba(0, 0, 0, 0.2);
}
.adoption-example__text01 span{
    font-weight: 800;
    color: #284987;
}
.adoption-example__flex{
    position: relative;
    align-items: start;
    justify-content: space-around;
}
.adoption-example__flex--first,.adoption-example__flex--second{
    position: relative;
}
.adoption-example__flex--second figure{
    text-align: end;
}
.adoption-example__flex--first figure img,.adoption-example__flex--second figure img{
    width: 80%;
}
.adoption-example__flex--first figure img{
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1),20px 20px 0 #deedf5,0 30px 30px rgba(0, 0, 0, 0.1);
}
.adoption-example__flex--second figure img{
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1),-20px -20px 0 #deedf5,0 -30px 30px rgba(0, 0, 0, 0.1);
}
.adoption-example__flex--first__text{
    position: absolute;
    right: 3%;
    bottom: 3%;
    width: 62%;
    padding-top: 4%;
    display: flex;
    align-items: end;
    text-align: end;
}
.adoption-example__flex--first__text .font-size-40,.adoption-example__flex--second__text .font-size-40{
    flex-grow: 1;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.05em;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    word-wrap:nowrap;
}
.adoption-example__flex__backcolor-blue{
    background-color:#a6d8f1;
    display: flex;
    align-items: baseline;
}
.adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue{
    width: 48%;
    margin-left: 2%;
    padding-top: 2%;
    padding-right: 3%;
    padding-left: 3%;
}
.adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-141{
    margin: 0 auto;
    font-weight:600;
    letter-spacing: -0.05em;
    text-align: center;
    position: relative;
}
.adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-141::before{
    position:absolute;
    content:"0";
    font-size: 18.8vw;
    font-weight:600;
    letter-spacing: -0.05em;
    left: -10%;
    right: 0;
    bottom: 7%;
    text-align: center;
    background: linear-gradient(90deg, #327aa8,#284786);
    background: -webkit-linear-gradient(0deg, #327aa8,#284786);
    -webkit-background-clip: text;
    text-shadow: none;
    -webkit-text-fill-color: transparent;
}
.adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-84{
    margin: 0 auto;
    font-weight:800;
    letter-spacing: -0.05em;
    text-align: center;
    position: relative;
}
.adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-84::before{
    position:absolute;
    content:"円";
    font-size: 11.200000000000001vw;
    font-weight:800;
    letter-spacing: -0.05em;
    left: -10%;
    right: 0;
    bottom: 7%;
    text-align: center;
    background: linear-gradient(90deg, #327aa8,#284786);
    background: -webkit-linear-gradient(0deg, #327aa8,#284786);
    -webkit-background-clip: text;
    text-shadow: none;
    -webkit-text-fill-color: transparent;
}
.adoption-example__flex--second{
    margin-top:37%;
}
.adoption-example__flex--second__text{
    position: absolute;
    display: flex;
    align-items: end;
    width: 91%;
    bottom: 2%;
    padding-left: 3%;
}
.adoption-example__flex--second__text--number{
    padding: 2% 3% 2% 4%;
    margin-right: 1%;
    width: 48%;
}
.adoption-example__flex--second__precautionary{
    position: absolute;
    bottom: -6%;
    left: 7.7%;
}
.adoption-example__inner__text02{
    width: 91%;
    margin: 20% auto 0;
    text-align: center;
}
.adoption-example__decoration01,.adoption-example__decoration02,.adoption-example__decoration03,.adoption-example__decoration04{
    display: inline-block;
    width: 16.7px;
    height:16.7px;
    border-radius: 50%;
}
.adoption-example__decoration{
    position: absolute;
    right: 48.3%;
    bottom: -2.7%;
    display: flex;
    flex-direction: column;
}
.adoption-example__decoration01{
    margin:0 0 24%;
    background-color:#0a3f90;
}
.adoption-example__decoration02{
    margin:24% 0;
    background-color:#0d579d;
}
.adoption-example__decoration03{
    margin:24% 0;
    background-color:#106ca9;
}
.adoption-example__decoration04{
    margin:24% 0 0;
    background-color:#158cbb;
}
@media screen and (min-width:375px) {
    .adoption-example__h2--before span {
        left: calc(50% - 9px); /* 中心点、、文字サイズ分ずらす */
        width: 9px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:390px) {
    .adoption-example__inner{
        padding-bottom: 120px;
    }
    .adoption-example__decoration {
        bottom: -3.5%;
    }
}/*iphone13pro対応*/
@media screen and (min-width:400px) {
    .adoption-example__inner{
        padding-bottom: 19%;
    }
    .adoption-example__decoration{
        bottom: -2.7%;
    }
}
@media screen and (min-width:416px) {
    .adoption-example__h2--before span {
        left: calc(50% - 10px); /* 中心点、、文字サイズ分ずらす */
        width: 10px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:458px) {
    .adoption-example__h2--before span {
        left: calc(50% - 11px); /* 中心点、、文字サイズ分ずらす */
        width: 11px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:499px) {
    .adoption-example__h2--before span {
        left: calc(50% - 12px); /* 中心点、、文字サイズ分ずらす */
        width: 12px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:500px) {
    .adoption-example__decoration01,.adoption-example__decoration02,.adoption-example__decoration03,.adoption-example__decoration04{
        width: 25px;
        height: 25px;
    }
}
@media screen and (min-width:600px) {
    .adoption-example__decoration01,.adoption-example__decoration02,.adoption-example__decoration03,.adoption-example__decoration04{
        width: 18px;
        height: 18px;
    }
}
@media screen and (min-width:540px) {
    .adoption-example__h2--before span {
        left: calc(50% - 13px); /* 中心点、、文字サイズ分ずらす */
        width: 13px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:582px) {
    .adoption-example__h2--before span {
        left: calc(50% - 14px); /* 中心点、、文字サイズ分ずらす */
        width: 14px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:624px) {
    .adoption-example__h2--before span {
        left: calc(50% - 15px); /* 中心点、、文字サイズ分ずらす */
        width: 15px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:665px) {
    .adoption-example__h2--before span {
        left: calc(50% - 16px); /* 中心点、、文字サイズ分ずらす */
        width: 16px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:707px) {
    .adoption-example__h2--before span {
        left: calc(50% - 17px); /* 中心点、、文字サイズ分ずらす */
        width: 17px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:751px) {
    .adoption-example{
        background: linear-gradient(-30deg, rgba(0, 120, 171, 0.4),rgba(212, 240, 255, 0.4)),url(images/adoption-example-back-image_pc.png),image-set(url(images/adoption-example-back-image_pc.png) 1x, url(images/adoption-example-back-image_pc@2x.png) 2x);
        background: -webkit-linear-gradient(-30deg, rgba(0, 120, 171, 0.4),rgba(212, 240, 255, 0.4)),url(images/adoption-example-back-image_pc.png),-webkit-image-set(url(images/adoption-example-back-image_pc.png) 1x, url(images/adoption-example-back-image_pc@2x.png) 2x);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-position-y: 13%;
    }
    .adoption-example__inner{
        max-width: 1200px;
        margin: 0 auto;
        padding-top:11.25%;
        padding-bottom: 9%;
    }
    .adoption-example__h2{
        font-size: 4vw;
        padding: 1% 0 4%;
    }
    .adoption-example__inner .adoption-example__text01.font-size-56{
        position: relative;
        margin-top: 0;
        left: 0;
        text-align: center;
        font-size: 2.5vw;
    }
    .adoption-example__h2--before{
        font-size: 18px;
    }
    .adoption-example__flex{
        padding: 0 12%;
        margin-top: 2.9%;
        display: flex;
        position: relative;
        justify-content:space-between;
    }
    .adoption-example__flex--first figure img, .adoption-example__flex--second figure img{
        width: 100%;
    }
    .adoption-example__flex--first{
        margin-right: 3%;
    }
    .adoption-example__flex--first__text{
        width: 100%;
        left: 8%;
        right: auto;
        bottom:-11%;
        padding-top: 0;
        flex-direction:row-reverse;
        text-align: start;
        align-items: center;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue{
        width: 135px;
        margin-left: 0;
        margin-right: 2%;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-141{
        font-size: 6.75vw;
        margin: 0 auto;
        letter-spacing: -0.05em;
        text-align: center;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-141::before{
        content:"0";
        font-size: 6.75vw;
        letter-spacing: -0.05em;
        left: -10%;
        right: 0;
        bottom: 7%;
        text-align: center;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-84{
        font-size: 4vw;
        margin: 0 auto;
        font-weight:800;
        letter-spacing: -0.05em;
        text-align: center;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-84::before{
        font-size: 4vw;
        font-weight:800;
        letter-spacing: -0.05em;
        left: -10%;
        right: 0;
        bottom: 7%;
        text-align: center;
    }
    .adoption-example__flex--first__text .font-size-40, .adoption-example__flex--second__text .font-size-40{
        font-size: 3vw;
        line-height: 1;
    }
    .adoption-example__flex--second{
        margin-top:2%;
        margin-left: 3%;
    }
    .adoption-example__flex--second__text{
        align-items: center;
        width: 101%;
        bottom: -6%;
        padding-left: 0;
        padding-left: 3%;
    }
    .adoption-example__flex--second__precautionary.font-size-24{
        width: 43%;
        font-size: 1.1666666666666667vw;
        text-wrap:nowrap;
        left: 53%;
        bottom: -12%;
    }
    .adoption-example__inner__text02{
        width:72%;
        margin: 5% auto 0;
        height: auto;
        aspect-ratio: 1730/242;
    }
    .adoption-example__inner__text02 picture img{
        width:100%;
    }
    .adoption-example__decoration{
        right: 49%;
        bottom: -3%;
    }
}
@media screen and (min-width:752px) {
    .adoption-example__decoration01,.adoption-example__decoration02,.adoption-example__decoration03,.adoption-example__decoration04{
        width: 16px;
        height: 16px;
    }
    .adoption-example__decoration{
        bottom: -6%;
    }
}
@media screen and (min-width:1200px) {
    .adoption-example__inner{
        padding-top:135px;
    }
    .adoption-example__h2{
        padding: 17px 0 52px;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-141{
        font-size: 81px;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-141::before{
        font-size: 81px;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-84{
        font-size: 48px;
    }
    .adoption-example__flex--first__text--number.adoption-example__flex__backcolor-blue .font-size-84::before{
        font-size: 48px;
    }
    .adoption-example__flex--first__text .font-size-40, .adoption-example__flex--second__text .font-size-40{
        font-size: 36px;
    }
    .adoption-example__inner .adoption-example__text01.font-size-56{
        font-size: 30px;
    }
    .adoption-example__flex{
        margin-top: 34.8px;
    }
    .adoption-example__flex--second{
        margin-top:20px;
    }
    .adoption-example__flex--second__precautionary.font-size-24{
        font-size: 14px;
    }
    .adoption-example__inner__text02{
        width:865px;
        margin: 58px auto 0;
    }
    .adoption-example__decoration01,.adoption-example__decoration02,.adoption-example__decoration03,.adoption-example__decoration04{
        width: 25px;
        height: 25px;
    }
}
    /*badcycle*/
.badcycle{
    padding-top: 18%;
    padding-bottom: 17%;
    background: url(images/badcycle__back-image.png),#f4f9fb;
    background: image-set(url(images/badcycle__back-image.png) 1x, url(images/badcycle__back-image@2x.png) 2x),#f4f9fb;
    background: -webkit-image-set(url(images/badcycle__back-image.png) 1x, url(images/badcycle__back-image@2x.png) 2x),#f4f9fb;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    aspect-ratio: 750/1089.5;
}
.badcycle__inner__h2{
    padding-top: 4%;
    padding-bottom: 3%;
    text-align: center;
    text-shadow:1px  1px 0px #000000,
    -1px  1px 0px #000000,
     1px -1px 0px #000000,
    -1px -1px 0px #000000,
     1px  0px 0px #000000,
     0px  1px 0px #000000,
    -1px  0px 0px #000000,
     0px -1px 0px #000000,
     1px 2px 0px #000000,
     2px 1px 0px #000000,
     1px -2px 0px #000000,
    -2px 1px 0px #000000,
    -1px 2px 0px #000000,
    2px -1px 0px #000000,
    -1px -2px 0px #000000,
    -2px -1px 0px #000000,
     2px  2px 0px #000000,
    -2px  2px 0px #000000,
     2px -2px 0px #000000,
    -2px -2px 0px #000000,
     2px  0px 0px #000000,
     0px  2px 0px #000000,
    -2px  0px 0px #000000,
     0px -2px 0px #000000;
}
.badcycle__inner__h2--before{
    position:relative;
	width:115px; /* 直径 */
    right:57.5px;/* 半径 */
	font-size: 2.4vw;
    font-weight: 400;
	text-align: center;
	margin: 0 auto;
	transform: rotate(-80deg); /* 円の回転 */
    letter-spacing: 0.1em;
}
.badcycle__inner__h2--before span {
	position: absolute;
	top: 0;
    /* 中心点、、文字サイズ分ずらす */
    left: calc(50% - 2.4vw); /* 中心点、、文字サイズ分ずらす */
	display: inline-block;
	width: 18px; /* 文字サイズより小さくしない */
	height: 57.5px; /* 半径 */
	transform-origin: center bottom; /* 回転の基準点 */
    font-weight: 400;
    letter-spacing: 0.1em;
}
.badcycle__inner__h2--before span:first-child{
    transform: rotate(40deg);
}
.badcycle__inner__h2--before span:nth-child(2) {
    transform: rotate(54deg);
}
.badcycle__inner__h2--before span:nth-child(3) {
    transform: rotate(69deg);
}
.badcycle__inner__h2--before span:nth-child(4) {
	transform: rotate(79deg);
}
.badcycle__inner__h2--before span:nth-child(5) {
    transform: rotate(90deg);
}
.badcycle__inner__h2--before span:nth-child(6) {
    transform: rotate(102deg);
}
.badcycle__inner__h2--before span:nth-child(7) {
    transform: rotate(113deg);
}
.badcycle__inner__h2--before span:nth-child(8) {
    transform: rotate(122deg);
}
.badcycle__inner__h2--before span:nth-child(9) {
    transform: rotate(130deg);
}
.badcycle__img{
    display: inline-block;
    text-align: end;
}
.badcycle__inner__img img{
    width: 98%;
}
.badcycle__inner__text--last{
    margin-top: 90%;
    text-align: center;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
    font-weight: 600;
    line-height: 1.25;
}
.badcycle__inner__text--last em{
    font-style: normal;
}
@media screen and (min-width:375px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 9px); /* 中心点、、文字サイズ分ずらす */
        width: 9px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:390px) {
    .badcycle{
        padding-top: 115px;
    }/*iphone13pro対応*/
}
@media screen and (min-width:400px) {
    .badcycle{
        padding-top: 18%;
    }
}
@media screen and (min-width:416px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 10px); /* 中心点、、文字サイズ分ずらす */
        width: 10px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:458px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 11px); /* 中心点、、文字サイズ分ずらす */
        width: 11px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:499px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 12px); /* 中心点、、文字サイズ分ずらす */
        width: 12px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:540px) {
    .pbadcycle__inner__h2--before span {
        left: calc(50% - 13px); /* 中心点、、文字サイズ分ずらす */
        width: 13px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:582px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 14px); /* 中心点、、文字サイズ分ずらす */
        width: 14px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:624px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 15px); /* 中心点、、文字サイズ分ずらす */
        width: 15px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:665px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 16px); /* 中心点、、文字サイズ分ずらす */
        width: 16px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:707px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 17px); /* 中心点、、文字サイズ分ずらす */
        width: 17px; /* 文字サイズより小さくしない */
    }
}

@media screen and (min-width:751px) {
    .badcycle{
        padding-top: 10%;
        padding-bottom: 13%;
        background:url(images/badcycle__back-image_pc.png),#f4f9fb;
        background: image-set(url(images/badcycle__back-image_pc.png) 1x, url(images/badcycle__back-image_pc@2x.png) 2x),#f4f9fb;
        background: -webkit-image-set(url(images/badcycle__back-image_pc.png) 1x, url(images/badcycle__back-image_pc@2x.png) 2x),#f4f9fb;  
     
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 160%;
        aspect-ratio: 1920/821;
    }
    .badcycle__inner{
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .badcycle__inner__h2{
        font-size: 4vw;
        padding-top: 2%;
    }
    .badcycle__inner__h2--before{
        font-size: 18px;
    }
    .badcycle__inner__img{
        text-align: start;
        margin-left: 3%;
    }
    .badcycle__inner__img img{
        width: 59%;
    }
    .badcycle__inner__text--last.font-size-48{
        position: absolute;
        bottom: 0;
        right: 0;
        margin-top: 0;
        text-align: end;
        line-height: 1.2;
        font-size: 2.5vw;
        margin-right: 10%;
    }
    .badcycle__inner__text--last span{
        font-size: 3vw;
    }
}
@media screen and (min-width:1201px) {
    .badcycle__inner__h2--before span {
        left: calc(50% - 18px);/* 中心点、、文字サイズ分ずらす */
    }
}
@media screen and (min-width:1920px) {
    .badcycle{
        padding-top: 120px;
        padding-bottom: 156px;
        background-size: contain;
    }
    .badcycle__inner__h2{
        font-size:48px;
        padding-top: 24px;
    }
    .badcycle__inner__img{
        margin-left: 36px;
    }
    .badcycle__inner__text--last.font-size-48{
        font-size: 30px;
    }
    .badcycle__inner__text--last span{
        font-size: 36px;
    }
}
    /*keypoint*/
.keypoint{
    position: relative;
}
.keypoint h2{
    padding-top: 10.27%;
    padding-bottom: 7%;
    text-align: center;
    background:url(images/keypoint__h2_back-image.jpg),#1f558c;
    background: image-set(url(images/keypoint__h2_back-image.jpg) 1x, url(images/keypoint__h2_back-image@2x.jpg) 2x),#1f558c;
    background: -webkit-image-set(url(images/keypoint__h2_back-image.jpg) 1x, url(images/keypoint__h2_back-image@2x.jpg) 2x),#1f558c;  
    background-size: cover;
    font-weight: 700;
}
.keypoint h2 span{
    font-weight: 700;
}
.keypoint__h2--dots{
    background-image: radial-gradient(circle at center, #fff 20%, transparent 20%); /* 点の色とサイズ調整 */
    background-position: top right; /* 点の位置 */
    background-repeat: repeat-x; /* 横方向に繰り返し */
    background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
    padding-top: .4em; /* 縦方向の位置調整 */
}
.keypoint ol li{
    position: relative;
    display: flex;
    align-items: center;
    padding-top:3%;
    padding-bottom: 2%;
    box-shadow: 0px 5px 5px hsla(0, 0%, 0%, 0.1)inset;
}
.keypoint ol li p{
    width: 100%;
}
.keypoint ol li p:before{
    content:'';
    display:inline-block;
    width:8.7%;
    height:auto;
    margin-right:5%;
    margin-left: 11.6%;
    position:relative;
    left:0;
    aspect-ratio: 65.5/66;
    vertical-align: middle;
    transform: scale(1.2);
}
.keypoint ol li:after{
    position: absolute;
    transform: rotate(45deg);
    top: -10px;
    content:'';
    margin-left: 14.5%;
    width: 19px;
    border-bottom: 0;
    box-shadow: 5px 5px 5px hsla(0, 0%, 0%, 0.1);
}
.keypoint ol li:first-child p:before{
    background-image: url(images/keypoint__li01.png);
    background-image: image-set(url(images/keypoint__li01.png) 1x, url(images/keypoint__li01@2x.png) 2x);
    background-image: -webkit-image-set(url(images/keypoint__li01.png) 1x, url(images/keypoint__li01@2x.png) 2x);  
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9;
}
.keypoint ol li:first-child{
    background-color: #3698c9;
    margin-top: 0;
    box-shadow: none;
}
.keypoint ol li:first-child:after{
    border: none;
}
.keypoint ol li:nth-child(2) p:before{
    background-image: url(images/keypoint__li02.png);
    background-image: image-set(url(images/keypoint__li02.png) 1x, url(images/keypoint__li02@2x.png) 2x);
    background-image: -webkit-image-set(url(images/keypoint__li02.png) 1x, url(images/keypoint__li02@2x.png) 2x);  
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 7;
}
.keypoint ol li:nth-child(2){
    background-color:#60b39f;
}
.keypoint ol li:nth-child(2):after{
    border-top: 20px solid #3698c9;
    z-index: 8;
}
.keypoint ol li:nth-child(3) p:before{
    background-image: url(images/keypoint__li03.png);
    background-image: image-set(url(images/keypoint__li03.png) 1x, url(images/keypoint__li03@2x.png) 2x);
    background-image: -webkit-image-set(url(images/keypoint__li03.png) 1x, url(images/keypoint__li03@2x.png) 2x);  
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 5;
}
.keypoint ol li:nth-child(3){
    background-color:#f4c63d;
}
.keypoint ol li:nth-child(3):after{
    border-top: 20px solid #60b39f;
    z-index: 6;
}
.keypoint ol li:nth-child(4) p:before{
    content: '';
    background-image: url(images/keypoint__li04.png);
    background-image: image-set(url(images/keypoint__li04.png) 1x, url(images/keypoint__li04@2x.png) 2x);
    background-image: -webkit-image-set(url(images/keypoint__li04.png) 1x, url(images/keypoint__li04@2x.png) 2x);  
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
}
.keypoint ol li:nth-child(4){
    background-color:#e79330;
}
.keypoint ol li:nth-child(4):after{
    border-top: 20px solid #f4c63d;
    z-index: 4;
}
.keypoint ol li:last-child p:before{
    content: '';
    background-image: url(images/keypoint__li05.png);
    background-image: image-set(url(images/keypoint__li05.png) 1x, url(images/keypoint__li05@2x.png) 2x);
    background-image: -webkit-image-set(url(images/keypoint__li05.png) 1x, url(images/keypoint__li05@2x.png) 2x);  
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}
.keypoint ol li:last-child{
    background-color:#d36226;
    box-shadow: 0px 5px 5px hsla(0, 0%, 0%, 0.1)inset,5px 5px 5px hsla(0, 0%, 0%, 0.1);
}
.keypoint ol li:last-child:after{
    border-top: 20px solid #e79330;
    z-index: 2;
}
.keypoint dl{
    margin:0 auto;
}
.keypoint dl dt{
    width:88%;
    margin: 0 auto;
    padding-top:17%;
    padding-bottom: 6%;
    font-weight: 700;
}
.keypoint dl dt:before{
    position:relative;
    display:inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(1.2);
}
.keypoint dl dt:first-child:before{
    content: '';
    background-image: url(images/keypoint__dl-dt-logo01.png);
    background-image: image-set(url(images/keypoint__dl-dt-logo01.png) 1x, url(images/keypoint__dl-dt-logo01@2x.png) 2x);
    background-image: -webkit-image-set(url(images/keypoint__dl-dt-logo01.png) 1x, url(images/keypoint__dl-dt-logo01@2x.png) 2x);  
    max-width: 30px;
    width: 4%;
    aspect-ratio: 30/30.5;
}
.keypoint dl dt:nth-child(3):before{
    content: '';
    background-image: url(images/keypoint__dl-dt-logo02.png);
    background-image: image-set(url(images/keypoint__dl-dt-logo02.png) 1x, url(images/keypoint__dl-dt-logo02@2x.png) 2x);
    background-image: -webkit-image-set(url(images/keypoint__dl-dt-logo02.png) 1x, url(images/keypoint__dl-dt-logo02@2x.png) 2x);  
    max-width: 30px;
    width: 4%;
    aspect-ratio: 30/30.5;
}
.keypoint dl dt:nth-child(5):before{
    content: '';
    background-image: url(images/keypoint__dl-dt-logo03.png);
    background-image: image-set(url(images/keypoint__dl-dt-logo03.png) 1x, url(images/keypoint__dl-dt-logo03@2x.png) 2x);
    background-image: -webkit-image-set(url(images/keypoint__dl-dt-logo03.png) 1x, url(images/keypoint__dl-dt-logo03@2x.png) 2x);  
    max-width: 30px;
    width: 4%;
    aspect-ratio: 30/30.5;
}
.keypoint dl dt:first-child{
    color:#ffb332;
}
.keypoint dl dt:nth-child(3){
    color:#dd6972;
}
.keypoint dl dt:nth-child(5){
    color:#44c6d9;
}
.keypoint dl dd p{
    width:88%;
    margin: 0 auto;
    line-height: 1.5;
    letter-spacing:0.05em;
}
.keypoint dl dd figure img{
    margin-top: 3.8%;
    width: 100%;
}
.keypoint dl dd:last-child figure img{
    margin-top: 11%;
}
.keypoint__decoration01,.keypoint__decoration02,.keypoint__decoration03,.keypoint__decoration04{
    display: inline-block;
    width: 16.7px;
    height: 16.7px;
    border-radius: 50%;
}
.keypoint__decoration{
    position: absolute;
    right: 48.3%;
    bottom: -3.5%;
    display: flex;
    flex-direction: column;
}
.keypoint__decoration01{
    margin:0 0 24%;
    background-color:#0a3f90;
}
.keypoint__decoration02{
    margin:24% 0;
    background-color:#0d579d;
}
.keypoint__decoration03{
    margin:24% 0;
    background-color:#106ca9;
}
.keypoint__decoration04{
    margin:24% 0 0;
    background-color:#158cbb;
}
@media screen and (min-width:390px) {
    .keypoint__decoration{
        bottom: -4.2%;
    }
}
@media screen and (min-width:400px) {
    .keypoint__decoration{
        bottom: -3.5%;
    }
}
@media screen and (min-width:500px) {
    .keypoint__decoration01,.keypoint__decoration02,.keypoint__decoration03,.keypoint__decoration04{
        width: 25px;
        height: 25px;
    }
}
@media screen and (min-width:600px) {
    .keypoint__decoration01,.keypoint__decoration02,.keypoint__decoration03,.keypoint__decoration04{
        width: 18px;
        height: 18px;
    }
}
@media screen and (min-width:751px) {
    .keypoint h2{
        font-size:2.5vw;
        padding-top: 3%;
        padding-bottom: 2.7%;
        background:url(images/keypoint__h2_back-image_pc.jpg),#1f558c;
        background: image-set(url(images/keypoint__h2_back-image_pc.jpg) 1x, url(images/keypoint__h2_back-image_pc@2x.jpg) 2x),#1f558c;
        background: -webkit-image-set(url(images/keypoint__h2_back-image_pc.jpg) 1x, url(images/keypoint__h2_back-image_pc@2x.jpg) 2x),#1f558c;
    }
    .keypoint h2 span.font-size-72{
        font-size: 4vw;
    }
    .keypoint h2 span.font-size-132{
        font-size: 6.7175vw;
    }
    .keypoint ol li{
        margin: 0 auto;
        height: 98px;
        font-size: 2.5vw;
        padding-top: 2%;
    }
    .keypoint ol li p{
        width: 55%;
        margin: 0 auto;
    }
    .keypoint ol li p:before{
        width:10%;
        margin-right:11%;
        margin-left: 0;
    }
    .keypoint ol li:after{
        margin-left: 24.5%;
    }
    .keypoint dl{
        margin:1.8% auto 9%;
        width: 54%;
    }
    .keypoint dl dt{
        width: 100%;
        padding-top:8%;
        padding-bottom: 3.8%;
        font-size: 2.5vw;
    }
    .keypoint dl dd{
        font-size: 2vw;
        font-weight: 400;
        line-height: 1.5;
    }
    .keypoint dl dd p{
        width: 100%;
    }
    .keypoint dl dd figure{
        width: 100%;
    }
    .keypoint dl dd:last-child figure img{
        margin-top: 3.8%;
    }
    .keypoint__decoration{
        right: 49.5%;
        bottom: -6%;
    }
}
@media screen and (min-width:752px) {
    .keypoint__decoration01,.keypoint__decoration02,.keypoint__decoration03,.keypoint__decoration04{
        width: 16px;
        height: 16px;
    }
}
@media screen and (min-width:1200px) { 
    .keypoint h2{
        font-size: 30px;
    }
    .keypoint h2 span.font-size-72{
        font-size: 48px;
    }
    .keypoint h2 span.font-size-132{
        font-size: 80.61px;
    }
    .keypoint ol li{
        margin: 0 auto;
        font-size: 30px;
    }
    .keypoint ol li:after{
        margin-left: 24.5%;
    }
    .keypoint ol li p:before{
        width:65.31px;
    }
    .keypoint dl{
        margin:21.6px auto 108px;
        width: 648px;
    }
    .keypoint dl dt{
        font-size: 30px;
    }
    .keypoint dl dd{
        font-size: 24px;
    }
    .keypoint__decoration{
        bottom: -7.2%;
    }
    .keypoint__decoration01,.keypoint__decoration02,.keypoint__decoration03,.keypoint__decoration04{
        width: 25px;
        height: 25px;
    }
}
@media screen and (min-width:1500px) { 
    .keypoint ol li p{
        width: 43%;
        margin: 0 auto;
    }
    .keypoint ol li:after{
        margin-left: 30%;
    }
}
/* @media screen and (min-width:2000px) { 
} */
    /*goodcycle*/
.goodcycle{
    padding-top: 23%;
    padding-bottom: 18%;
    background:url(images/goodcycle__back-image.png);
    background-image: image-set(url(images/goodcycle__back-image.png) 1x, url(images/goodcycle__back-image@2x.png) 2x);
    background-image: -webkit-image-set(url(images/goodcycle__back-image.png) 1x, url(images/goodcycle__back-image@2x.png) 2x);  
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    aspect-ratio: 750/1056.5;
}
.goodcycle__inner__h2{
    margin-bottom: 4%;
    padding-top: 2.4%;
    position: relative;
    text-align: center;
    font-weight: bold;
    text-shadow: 0.01em 0.01em 0 #002753, -0.01em -0.01em 0 #002753,
    -0.01em 0.01em 0 #002753, 0.01em -0.01em 0 #002753,
    0px 0.01em 0 #002753,  0-0.01em 0 #002753,
    -0.01em 0 0 #002753, 0.01em 0 0 #002753;
    color: #edf6fb;
}
.goodcycle__inner__h2::before{
    position: absolute;
    content: '好循環';
    top: 22%;
    left: 39.8%;
    color: #002753;
    text-shadow: none;
}
.goodcycle__inner__h2--before{
    position:relative;
	width:105px; /* 直径 */
    right:52.5px;/* 半径 */
	font-size: 2.4vw;
    font-weight: 400;
	text-align: center;
	margin: 0 auto;
	transform: rotate(-80deg); /* 円の回転 */
    letter-spacing: 0.1em;
}
.goodcycle__inner__h2--before span {
	position: absolute;
	top: 0;
	left: calc(50% - 18px); /* 中心点、、文字サイズ分ずらす */
	display: inline-block;
	width: 18px; /* 文字サイズより小さくしない */
	height: 52.5px; /* 半径 */
	transform-origin: center bottom; /* 回転の基準点 */
    font-weight: 400;
    letter-spacing: 0.1em;
}
.goodcycle__inner__h2--before span:first-child{
    transform: rotate(31deg);
}
.goodcycle__inner__h2--before span:nth-child(2) {
    transform: rotate(45deg);
}
.goodcycle__inner__h2--before span:nth-child(3) {
    transform: rotate(58deg);
}
.goodcycle__inner__h2--before span:nth-child(4) {
	transform: rotate(73deg);
}
.goodcycle__inner__h2--before span:nth-child(5) {
    transform: rotate(80deg);
}
.goodcycle__inner__h2--before span:nth-child(6) {
    transform: rotate(95deg);
}
.goodcycle__inner__h2--before span:nth-child(7) {
    transform: rotate(107deg);
}
.goodcycle__inner__h2--before span:nth-child(8) {
    transform: rotate(118deg);
}
.goodcycle__inner__h2--before span:nth-child(9) {
    transform: rotate(128deg);
}
.goodcycle__inner__h2--before span:last-child {
    transform: rotate(138deg);
}
.goodcycle__inner__text--last{
    text-align: center;
    text-shadow: 0px 1px 10px #000000;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 71%;
}
.goodcycle__inner__text--last img{
    width: 41%;
    margin-right: 1%;
}
@media screen and (min-width:375px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 9px); /* 中心点、、文字サイズ分ずらす */
        width: 9px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:390px) {
    .goodcycle{
        padding-top: 144.5px;
        background-size:cover;
    }
}/*iphone13pro対応*/
@media screen and (min-width:400px) {
    .goodcycle{
        padding-top: 23%;
        background-size:contain;
    }
}
@media screen and (min-width:416px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 10px); /* 中心点、、文字サイズ分ずらす */
        width: 10px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:458px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 11px); /* 中心点、、文字サイズ分ずらす */
        width: 11px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:499px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 12px); /* 中心点、、文字サイズ分ずらす */
        width: 12px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:540px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 13px); /* 中心点、、文字サイズ分ずらす */
        width: 13px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:582px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 14px); /* 中心点、、文字サイズ分ずらす */
        width: 14px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:624px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 15px); /* 中心点、、文字サイズ分ずらす */
        width: 15px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:665px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 16px); /* 中心点、、文字サイズ分ずらす */
        width: 16px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:707px) {
    .goodcycle__inner__h2--before span {
        left: calc(50% - 17px); /* 中心点、、文字サイズ分ずらす */
        width: 17px; /* 文字サイズより小さくしない */
    }
}
@media screen and (min-width:751px) {
    .goodcycle{
        padding: 10% 0 13%;
        background:url(images/goodcycle__back-image_pc@2x.png),#edf6fb;
        background: image-set(url(images/goodcycle__back-image_pc.png) 1x, url(images/goodcycle__back-image_pc@2x.png) 2x),#edf6fb;
        background: -webkit-image-set(url(images/goodcycle__back-image_pc.png) 1x, url(images/goodcycle__back-image_pc@2x.png) 2x),#edf6fb;
        background-size: 160%;
        background-repeat: no-repeat;
        background-position: bottom;
        aspect-ratio: 1920/848.5;
    }
    .goodcycle__inner{
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .goodcycle__inner__h2::after{
        left: 43%;
    }
    .goodcycle__inner__h2{
        padding:1% 0;
    }
    .goodcycle__inner__h2--before{
        font-size: 18px;
    }
    .goodcycle__inner__h2::before{
        top: 12%;
        left: 43.7%;
    }
    .goodcycle__inner__h2--before{
        position:relative;
        width:105px; /* 直径 */
        right:52.5px;/* 半径 */
        font-size: 18px;
    }
    .goodcycle__inner__img{
        display: inline-block;
        width: 61%;
        margin-left: 37%;
    }
    .goodcycle__inner__text--last{
        position: absolute;
        bottom: 0;
        margin-top: 0;
        margin-left: 10%;
        font-size: 3vw;
        text-align: start;
        line-height: 1.5;
    }
    .goodcycle__inner__text--last img{
        width: 25.5%;
    }
}
@media screen and (min-width:1920px) {
    .goodcycle{
        padding: 120px 0 156px;
        background-size: contain;
    }
    .goodcycle__inner__h2{
        padding:12px 0;
    }
    .goodcycle__inner__text--last{
        font-size: 36px;
    }
    .goodcycle__inner__text--last img{
        width: 306px;
    }
}
    /*tel-cta*/
.tel-cta{
    margin-top: 12%;
}
.tel-cta h2{
    text-align: center;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 5%;
}
.tel-cta__text01{
    text-align: center;
    margin-bottom: 10%;
}
.tel-cta__box{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: #000000 solid 2px;
    width:93%;
    height: 51%;
    margin: 0 auto;
    padding: 7% 2%;
}
.tel-cta__box:before{
    top: -2px;
    left: 10%;
    position: absolute;
    content: '';
    border-top: #fff solid 2px;
    border-bottom: #fff solid 2px;
    width:81%;
    height: 100%;
    margin: 0 auto;
    z-index: 2;
}
.tel-cta__box:after{
    left: -2px;
    position: absolute;
    content: '';
    width:100%;
    height: 70%;
    margin: 0 auto;
    border-right: #fff solid 2px;
    border-left: #fff solid 2px;
    z-index: 2;
}
.tel-cta__box__top{
    position: relative;
    z-index: 3;
}
.tel-cta__box__top--first-text{
    margin-bottom:5%;
    font-weight: 400;
}
.tel-cta__box__top--last-text{
    position: relative;
    text-align: center;
    line-height: 1.4;
    font-weight:400;
    margin: 3.5% auto 6%;
    align-items: center;
}
.tel-cta__box__top--last-text:before{
    position: absolute;
    content: "";
    left: 24%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 5px;
    transform: rotate(-45deg);
}
.tel-cta__box__top--last-text:after{
    position: absolute;
    content: "";
    right: 24%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 5px;
    transform: rotate(45deg);
}
.tel-cta__box__top a{
    display: flex;
    justify-content: center;
    text-align: center;
}
.tel-cta__box__top figure{
    width: 5.6%;
    height: auto;
    margin-right:3%;
}
.tel-cta__box__top a.font-size-70{
    color: #000;
}
.tel-cta__box a.font-size-70:hover{
    opacity: 0.5;
}
.tel-cta__box__top--btn{
    width: 43%;
    margin: 0 auto;
    padding:3% 0;
    border-radius: 30px;
    background-color: #57b327;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.08);
}
@media screen and (min-width:751px) {
    .tel-cta{
        margin-top: 10.1%;
    }
    .tel-cta h2{
        margin-bottom: 5%;
    }
    .tel-cta__text01{
        margin-bottom: 5%;
    }
    .tel-cta__box{
        position: relative;
        border: #000000 solid 2px;
        width: auto;
        height: 41%;
        margin: 0 26.5%;
    }
    .tel-cta__box:after{
        top: auto;
    }
    .tel-cta__box__top--first-text.font-size-24{
        font-size:2vw;
    }
    .tel-cta__box__top--last-text:before{
        left: 10%;
    }
    .tel-cta__box__top--last-text:after{
        right: 10%;
    }
    .tel-cta__box__top figure{
        width: 5%;
        margin-right: 2%;
    }
    .tel-cta__box__top a.font-size-70{
        font-size: 4vw;
    }
    .tel-cta__box__top--btn{
        font-size: 1.6666666666666667vw;
    }
}
@media screen and (min-width:1200px) {
    .tel-cta__box{
        width: 562px;
        margin: 0 auto;
        padding: 40px 20px;
    }
    .tel-cta__box__top a.font-size-70{
        font-size: 48px;
    }
    .tel-cta__box__top--first-text.font-size-24{
        font-size:24px
    }
    .tel-cta__box__top--last-text:before{
        left: 20%;
    }
    .tel-cta__box__top--last-text:after{
        right: 20%;
    }
    .tel-cta__box__top figure{
        width: 27px;
        margin-right: 20px;
    }
    .tel-cta__box__top--btn{
        font-size: 20px;
    }
}
    /* form-cta */
.form-cta{
    width: 80%;
    margin: 0 auto 11%;
}
.form-cta h2{
    padding-top: 22%;
    padding-bottom: 10%;
    text-align: center;
    font-style: italic;
    font-weight: 600;
}
.mw_wp_form_preview h2,.mw_wp_form_complete h2{
    padding-top: 50%;
    padding-bottom: 13%;
}
.form-cta ul li{
    display: flex;
    flex-direction: column;
    text-align: start;
}
.form-cta ul li:first-child{
    margin-top: 0;
}
.form-cta ul li.form-cta__li--border{
    border-bottom:  2px solid #e5e5e5;
}
.form-cta ul li label{
    margin: 6% 0 3%;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.form-cta ul li.form-cta__li--privacypolicy label{
    display: inline-block;
}
.form-cta ul li:first-child label{
    margin-top: 0;
}
::placeholder {
    color: #fff;
}
.form-cta ul li textarea,.form-cta ul li input{
    margin-bottom: 6%;
    padding: 3% 1%;
    background-color:#d0e2f0;
    border-radius: 10px;
    border: none;
    box-shadow:0 0 12px 12px rgba(147, 201, 240, 0.2) inset;
}
.form-cta ul li span.font-color-white{
    display: inline-block;
    background-color:#ff001f;
    border-radius: 4px;
    margin-left: 3%;
    padding: 5px 6px;
}
.form-cta ul li.form-cta__li--privacypolicy{
    text-align: center;
    margin-top: 8%;
}
.form-cta ul li.form-cta__li--privacypolicy input{
    vertical-align: baseline;
    background-color:#fff;
    border-radius: 0px;
    border:1px solid;
    margin-bottom: 0;
    box-shadow:none;
}
.form-cta ul li.form-cta__li--last-text.font-size-22{
    position: relative;
    text-align: center;
    line-height: 1.4;
    font-weight:400;
    margin: 3.5% auto 6%;
    align-items: center;
}
.form-cta ul li.form-cta__li--last-text:before{
    position: absolute;
    content: "";
    left: 15%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 5px;
    transform: rotate(-45deg);
}
.form-cta ul li.form-cta__li--last-text:after{
    position: absolute;
    content: "";
    right: 15%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 5px;
    transform: rotate(45deg);
}
.form-cta ul li .form-cta__li--confirm{
    background-color: #f19447;
    border-radius: 31px;
    border: 5px solid #f19447;
    box-shadow: 0px 10px 10px hsla(0, 0%, 0%, 0.08);
    width: 50%;
    margin: 0 auto;
    padding: 2% 0;
}
.form-cta ul li .form-cta__li--confirm:hover{
    box-shadow:none;
    transform: translateY(3px);
    cursor: pointer;
}
.form-cta ul li .error{
    font-size: 2.4vw;
    color: #ff001e;
    font-weight:400;
    margin-bottom: 6%;
}
.form-cta ul li .error:before{
    content: '※';
}
.form-cta .form-cta__complete{
    margin-top: 30%;
}
.form-cta__complete--text{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.form-cta .form-cta__box--privacypolicy{
    border-radius: 10px;
    border: 5px solid #234b8c;
    margin:16% auto 0;
}
.form-cta .form-cta__box--privacypolicy h3{
    text-align: center;
    background-color: #234b8c;
    font-weight: 600;
    padding-top: 6%;
    padding-bottom: 5%;
}
.form-cta .form-cta__box--privacypolicy div{
    font-weight: 300;
    line-height: 1.5;
    margin: 0 1% 0;
    height: 250px;
    overflow: auto;
}
.form-cta .form-cta__box--privacypolicy p{
    margin-top:3%;
}
.form-cta .form-cta__box--privacypolicy div span,.form-cta .form-cta__box--privacypolicy dt{
    font-weight: 600;
}
.form-cta .form-cta__box--privacypolicy dt{
    margin-top: 6.7%;
}
.form-cta .form-cta__box--privacypolicy dd{
    margin-bottom: 3%;
}
@media screen and (min-width:500px) {
    .form-cta .form-cta__box--privacypolicy div{
        height: 380px;
    }
}
@media screen and (min-width:751px) {
    .form-cta{
        width: 100%;
        margin:0 auto 13%;
    }
    .form-cta h2{
        /* padding-top: 7%; */
        padding-top: 20%;/*リンク飛び先変更のため*/
        margin-top: -7%;/*リンク飛び先変更のためネガティブマージンで見た目だけ打ち消し*/
        padding-bottom: 8%;
        line-height: 1.3;
        font-size: 3vw;
    }
    .mw_wp_form_preview h2,.mw_wp_form_complete h2{
        padding-top: 21%;
    }
    .form-cta ul{
        margin: 0 26.5%;
    }
    .form-cta ul li label{
        margin: 3% 0;
        font-size:1.6666666666666667vw;
    }
    .form-cta ul li span.font-color-white{
        font-weight: 400;
        font-size:1vw;
    }
    .form-cta ul li textarea,.form-cta ul li input{
        margin-bottom: 3%;
        font-size: 1.5vw;
        font-weight: 400;
        line-height: 1.3;
    }
    .form-cta ul li.form-cta__li--privacypolicy{
        font-size: 1.6666666666666667vw;
        font-weight: 400;
        margin-top: 13%;
    }
    .form-cta ul li.form-cta__li--privacypolicy input{
        margin-bottom: 0;
    }
    .form-cta ul li.form-cta__li--last-text.font-size-22{
        font-size: 1.6666666666666667vw;
        line-height: 1.6;
        margin: 5% auto;
    }
    .form-cta ul li .form-cta__li--confirm{
        font-size: 2vw;
        font-weight: 600;
        line-height: 1.1;
        width: 45%;
        padding: 2% 0;
    }
    .form-cta ul li .error{
        font-size: 1vw;
        margin-bottom: 3%;
    }
    .form-cta__box--privacypolicy{
        margin:9% 20% 0;
    }
    .form-cta .form-cta__box--privacypolicy{
        width: 80%;
    }
    .form-cta .form-cta__box--privacypolicy h3{
        font-size: 2vw;
        padding-top: 2%;
        padding-bottom: 2%;
    }
    .form-cta .form-cta__box--privacypolicy div{
        line-height: 1.7;
        margin: 0 3% 0 2%;
        height: 260px;
    }
    .form-cta .form-cta__box--privacypolicy p{
        margin-top:1.5%;
    }
    .form-cta .form-cta__box--privacypolicy h3{
        font-size: 2vw;
    }
    .form-cta .form-cta__box--privacypolicy p,.form-cta .form-cta__box--privacypolicy dl{
        font-size: 14px;
    }
    .form-cta .form-cta__box--privacypolicy dt{
        margin-top: 5%;
    }
    .form-cta .form-cta__box--privacypolicy dd{
        margin-bottom: 5%;
    }
}
@media screen and (min-width:1201px) {
    .form-cta{
        margin: 0 auto 156px;
    }
    .form-cta h2,.form-cta ul{
        width: 562px;
        margin: 0 auto;
    }
    .form-cta h2{
        font-size: 36px;
        padding-top: 240px;/*リンク飛び先変更のため*/
        margin-top: -84px;/*リンク飛び先変更のためネガティブマージンで見た目だけ打ち消し*/
        padding-bottom: 96px;
    }
    .mw_wp_form_preview h2,.mw_wp_form_complete h2{
        padding-top: 250px;
    }
    .form-cta ul li label{
        margin: 15px 0;
        font-size:20px;
    }
    .form-cta ul li span.font-color-white{
        font-size:12px;
    }
    .form-cta ul li textarea,.form-cta ul li input{
        margin-bottom: 15px;
        font-size: 18px;
    }
    .form-cta ul li.form-cta__li--privacypolicy{
        font-size: 20px;
        margin-top: 70px;
    }
    .form-cta ul li.form-cta__li--privacypolicy input{
        margin-bottom: 0;
    }
    .form-cta ul li.form-cta__li--last-text.font-size-22{
        font-size: 20px;
    }
    .form-cta ul li:last-child .form-cta__li--confirm{
        width: 250px;
        font-size: 24px;
        padding: 10px auto;
    }
    .form-cta ul li .error{
        font-size: 14px;
        margin-bottom: 15px;
    }
    .form-cta .form-cta__box--privacypolicy{
        max-width: 712px;
        margin: 105px auto 0;
    }
    .form-cta .form-cta__box--privacypolicy h3{
        font-size: 24px;
    }
}
    /* footer */
footer{
    text-align: center;
    background-color: #93c9f0;
}
footer a{
    width: 41%;
    display: inline-block;
    padding-top:14.4%; /*108px*/
    padding-bottom:6%; /*45px*/
}
footer a span {
    display: inline-block;
    width: 100%;
    text-align: center;
    align-content: center;
    margin-top: 0.5em;
    padding: 2%;

    color: #FFF;
    background-color: #0027a2;
    
    font-weight: bold;
    font-size: 3vw;
    white-space: nowrap;
    line-height: 1.2em;
}
footer address{
    /* 画面幅750pxの時、width: 600px; */
    font-style: normal;
    background-color: #fff;
    margin: 0 9%;
    border-radius: 10px;
    box-shadow: 0px 10px 10px hsla(0, 0%, 0%, 0.08);
}
footer address dt{
    font-weight:600;
    padding-top: 4.9%;/* 37px */
    line-height:1.428;
    letter-spacing: 0.1em;
}    
footer address dd{
    width: 69%; /*414px*/
    font-weight:300;
    line-height:1.285;
    letter-spacing: 0.1em;
    display: inline-block;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 5.3%;/* 40px */
}
footer address dd:last-child(8){
    word-wrap: nowrap;
}
footer address dd:last-child{
    border: none;
}
footer p{
    padding-top: 10%;/*75px*/
    padding-bottom:15.67%;/*110px*/
    font-weight: 300;
}
@media screen and (min-width:751px) {
    footer a{
        width: 23%;
        padding-top:8%;
        padding-bottom:4.8%;
    }
    footer a span{
        font-size: 1.8vw;
    }
    footer address{
        margin: 0 20%;
    }
    footer address .font-size-28{
        font-size: 1.6666666666666667vw;
        line-height: 1.5;
    }
    footer p.font-size-18{
        font-size: 1.1666666666666667vw;
        font-weight: 300;
        padding-top: 5%;
        padding-bottom:10%;
    }
}
@media screen and (min-width:1201px) {
    footer a{
        width: 280px;
        padding-top:96px;
        padding-bottom:57.6px;
    }
    footer a span {
        font-size: 20px;
    }
    footer address{
        width: 712px;
        margin: 0 auto;
    }
    footer address .font-size-28{
        font-size: 20px;
    }
    footer p.font-size-18{
        font-size: 14px;
    }
}

/* front-page end */