@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&display=swap');

/* --- 表示系パーツ --- */

.scroll-anime{
	opacity: 0;
}

.fadeInDown {
	animation-name: fadeInDown;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes fadeInDown {
	0% {opacity: 0;}
	100% {
	opacity: 1;
	transform: translate(0);
	}
}

.updown {transform: translateY(-50px);}
.downup {transform: translateY(50px);}
.slide-right {transform: translateX(50px);}
.slide-left {transform: translateX(-50px);}

/* --- 装飾パーツ --- */

/* マーカー */
.text-marker {
  background-image: linear-gradient(transparent calc(100% - 8px), #D6F2EA calc(100% - 8px));
  background-repeat: no-repeat;
  background-size: 0 100%;
  font-weight: 600;
  transition: background-size 2s ease-out;
}

.text-marker.is-active {background-size: 100% 100%;}

/* 斜め線 */
.attention {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    margin-bottom: 8px;
    font-size: 1.9rem;
    font-weight: 600;
    color: #0A5540;
}

.attention:before,
.attention:after{
    position: absolute;    
    content: "";    
    top: 0;
    width: 2px;
    height: 90%;
    background: #0A5540;
    border-radius: 2px;
}

.attention:before {
    left: 0;
    transform: rotate(-25deg);
}
       
.attention:after {
    right: 0;
    transform: rotate(25deg);
}

/* 上向き矢印のCSS */
.arrow-up-line{position: relative;}
.arrow-up-line::before,
.arrow-up-line::after {
  content: '';
  position: absolute;
  background-color: #D4D7DA;
  width: 26px;
  height: 1px;
  bottom: 8px; /* 基準を下に変更 */
}

/* 右上の線 */
.arrow-up-line::before {
  left: 50%;
  transform-origin: left bottom;
  transform: rotate(-40deg);
}

/* 左上の線 */
.arrow-up-line::after {
  right: 50%;
  transform-origin: right bottom;
  transform: rotate(40deg);
}

/* --- Base --- */
body {
    margin: 0;
    color: #191919;
    background-color: #fff;
}

.sp-only{display: block;}
.pc-only{display: none;}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
a {
    color: #0A5540;
    text-decoration: none;
}
h1, h2, h3, h4, p, dl {
    margin: 0;
}
* {
    box-sizing: border-box;
}

@media screen and (max-width: 1100px) {
    .point h2{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .flow__steps{
        flex-wrap: wrap;
    }
    .flow__steps .flow__step{flex-basis: 100%;}
    .flow__step::after {
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0) rotate(45deg);
    }
}

/* --- Layout --- */
.page_glasses_keeper{
    font-size: 62.5%;
    font-family: "Noto Sans JP", sans-serif;
}

.forcms_block {overflow: hidden;}
.sec-box {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* --- Common Parts --- */
h2 {
    font-weight: 900;    
    font-size: clamp(30px, 5vw, 34px);
    text-align: center;
    margin-bottom: 20px;
    color: #0A5540;
}

h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    text-align: center;
}

.u-text {line-height: 1.8;}

.page_glasses_keeper .c-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 49px;
    margin: 20px auto 0;
    background-color: #0A5540;
    color: #fff;
    font-weight: bold;
    border-radius: 49px;
    border: none;
    cursor: pointer;
    text-align: center;
    position: relative;
    padding-left: 30px;    
    padding-right: 30px;
    font-size: 2rem;
    font-weight: 500;
}
.c-button__arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    background-color: #fff;
    border-radius: 50%;
}

.c-button__arrow::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #0A5540;
    border-right: 2px solid #0A5540;
    transform: rotate(45deg);
    border-radius: 2px;
}

/* --- Section 1: mv --- */
.mv {
    background-color: #F8F8F8;
}
.mv__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(to top left, #DEDEDE, #F6F6F6);
    padding: 40px 0 0;
}
.mv__text-content{padding: 0 13px;}
.mv__text-content .mv__icons{display: none;}
.mv__text-content h1 {
    /* font-size: 3rem; */
    font-size: clamp(26px, 5vw, 30px);    
    font-weight: 900;
    line-height: 1.6;
    color: #0A5540;
}

.mv__text-content .u-text {margin: 1em 0 2em;}
.mv__image-content {
    margin-top: 20px;
    width: 100%;
}

.mv__icons {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: -10%;
    padding: 0 26px;    
}

.mv__icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.4rem;
    width: calc(100% / 3);    
}

.mv__icon-item span{
    display: block;
    font-size: clamp(14px, 5vw, 17px);
    font-weight: 600;
    margin-bottom: 12px;
}

.mv__icon-item img {
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
}

.mv__inner .u-logo{
    margin-top: 10px;
    padding: 0 4px;
}

.intro .arrow-up-line{animation: scroll 3s infinite;}


/* スクロールアニメーション */
@keyframes scroll {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 0;
    transform: translate(0, 30px);    
  }
  100% {opacity: 0;}
}

/* --- Section 2: intro --- */
.intro .sec-box {
    text-align: center;
    padding: 30px 20px 120px;
    margin-top: 20px;
}

.scroll-icon{
    margin-top: 30px;
    position: relative;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #D8D8D8;
    padding-bottom: 34px;
}

.scroll-icon:after{
    position: absolute;
}

.intro .sec-box p{
    margin-top: 35px;
    font-size: clamp(18px, 5vw, 21px);
    font-weight: 600;
    text-align: center;
    line-height: 1.8;   
}

.intro h2{
    /* font-size: 2.7rem; */
    font-size: clamp(22px, 5vw, 27px);    
    font-weight: 600;
    color: #191919;
}

.intro .logo{padding: 0 20px;}

.intro-icon{text-align: center;}
.intro-icon img{max-width: 92px;}

.intro-list{
    margin-top: 50px;
    border: solid 1px #D8D8D8;
    padding: 38px 20px 40px;
}
.intro-list .u-text{margin-top: 12px;}
.intro-list .u-text ul li{
    position: relative;
    /* font-size: 1.6rem; */
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 500;
    text-align: left;
    padding-left: 24px;
    border-bottom: solid 1px #D8D8D8;
    padding: 10px 0 10px 26px;
}

.intro-list .u-text ul li:after{
    position: absolute;
    left: 0;
    top: 16px;
    content: "";
    width: 16px;
    height: 16px;
    background: url(../img/check_icon.png) no-repeat;
    background-size: 16px auto;
}


/* --- Section 3: point --- */
.point{
    position: relative;
    background: url(../img/sp/point_bg.png);
    background-size: cover;
}

.point h2{
    position: absolute;
    top: -60px;
    left: 0;
    font-size: 2.8rem;
    font-weight: 600;
    color: #191919;
    padding: 0 20px;
    line-height: 1.6;    
}

.point__item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.point .sec-box > .point__item:first-of-type{margin-top: 10px;}
.point__item + .point__item {margin-top: 20px;}
.point__text-content {order: 2;}
.point__text-content h3{display: none;}
.point__image-content {
    order: 1;
    position: relative;
}
.point__link{order: 3;}
.point__link .modal-btn{
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    color: #0A5540;
    text-decoration: underline;
    margin-top: 10px;
}

.point__link span{
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    margin-top: 5px;
}

.point__item.is-reverse {flex-direction: column;}
.point .sec-box{
    padding: 80px 0 60px;

}
.point .sec-box > div.point__item:nth-child(odd){padding: 0 0 0 40px;}
.point .sec-box > div.point__item:nth-child(even){padding: 0 40px 0 0;}
.point .sec-box > div.point__item:nth-child(3) .point__image-content{
    margin-top: -14%;
    position: relative;
    text-align: right;
}

.point .sec-box > div.point__item:nth-child(3) .point__image-content img{
    position: relative;
    z-index: 1;
    text-align: right;
    width: 100%;
}

.point h3{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 900;
    font-size: 4rem;    
    border-bottom: solid 1px #191919;
    text-align: left;
    color: #0A5540;
    line-height: 1;
    padding-bottom: 8px;
    margin-bottom: 0;
}

.point .sec-box > div.point__item:nth-child(even) h3{text-align: right;}
.point h3 span{
    font-size: clamp(66px, 5vw, 78px);
    font-weight: 600;
}

.point__sub_ttl{
    /* font-size: 2.8rem; */
    font-size: clamp(24px, 5vw, 28px);
    font-weight: 600;
}

.point .u-text{
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 400;
    margin-top: 15px;
    line-height: 2;    
}

.point .sec-box > div.point__item:nth-child(odd) .point__sub_ttl,
.point .sec-box > div.point__item:nth-child(odd) .u-text{padding: 0 20px 0 0;}
.point .sec-box > div.point__item:nth-child(even) .point__sub_ttl,
.point .sec-box > div.point__item:nth-child(even) .u-text{padding: 0 0 0 20px;}

.point .sec-box > div.point__item:nth-child(3) .point__sub_ttl{padding: 15px 20px 0 0;}

/* --- Section 4: about --- */
.about .about-inner{padding: 100px 20px 40px;}
.about .about-box{
    position: relative;
    border: solid 1px #D8D8D8;
    padding: 20px 20px 30px;
}

.about .about-box:after{
    position: absolute;
    content: "";
    bottom: -10px;
    left: 20px;
    width: calc(100% - 40px);
    height: 20px;
    background: #fff;
}

.about .about-ttl{
    background: #fff;
    margin-top: -18%;
}

.about .about-ttl p{
    /* font-size: 2.6rem; */
    font-size: clamp(22px, 5vw, 26px);
    font-weight: 600;
    text-align: center;
    margin-top: 6px;
}

.about .about-ttl div:nth-of-type(1),
.about .about-ttl div:nth-of-type(2){text-align: center;}
.about .about-ttl div:nth-of-type(1) img{width: 100px;}
.about .about-ttl div:nth-of-type(2) img{width: 200px;}
.about .about-ttl div:nth-of-type(2){margin-top: 6px;}

.about .about-lead{
    margin-top: 15px;
    padding: 30px 8px 0;
    font-size: clamp(14px, 4.2vw, 16px);
    line-height: 1.8;
    font-weight: 400;    
    border-top: solid 1px #D8D8D8;
}

.about .about-guid{
    padding: 60px 0 0;
}

.about .about-guid h2{font-size: clamp(30px, 5vw, 34px);}

.about .about-guid p{
    font-size: clamp(16px, 4.2vw, 18px);
    font-weight: 400;  
    line-height: 1.8;      
}

.about .about-price{
    margin-top: 40px;
}

.about .about-price span{
    display: block;
    /* font-size: 1.4rem; */
    font-size: clamp(8px, 3.2vw, 14px);
    font-weight: 400;    
    text-align: center;
}

/* フロー */
.flow{padding: 0 20px 40px;}
.flow h3{
    font-size: 2.7rem;
    font-weight: 600;
    margin-bottom: 20px;        
}

.flow .attention{font-size: clamp(16px, 4.5vw, 20px);}
.flow .sec-box{
    border: solid 1px #D8D8D8;
    padding: 40px 20px 30px;
}

.flow__steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.flow__step {
    text-align: center;
    position: relative;
    padding: 0 0 30px;
}

.flow__step:after{
    position: absolute;
    content: '';
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    width: 16px;
    height: 16px;
    border-radius: 1px;
    border-bottom: solid 2px #0A5540;
    border-right: solid 2px #0A5540;
}

.flow__steps > .flow__step:nth-of-type(3):after{display: none;}
.flow-desc{text-align: center;}
.flow__text {
    margin-top: 15px;
    text-align: left;
}

.flow__text p {
    font-size: clamp(14px, 4vw, 18px);
    margin-bottom: 10px;
}

.flow__text .c-button{
    width: 285px;
    margin: 10px 0 0;    
}

.flow__online .ttl{
    font-size: clamp(22px, 4vw, 27px);
    font-weight: 600;
    text-align: center;
}

.flow__online p{
    font-size: clamp(14px, 4vw, 18px);
    margin-top: 25px;
    line-height: 1.8;
}

.flow__online ul{
    margin-top: 20px;
    border-top: solid 1px #D8D8D8;
}

.flow__online ul li{
    border-bottom: solid 1px #D8D8D8;
    padding: 15px 0;
}

.flow__online ul li dt{
    font-size: 2.1rem;
    font-weight: 600;
    color: #0A5540;
}

.flow__online ul li dt h4{
    display: flex;
    align-items: center;
    font-size: clamp(16px, 4.5vw, 21px);
}

.flow__online ul li dt h4 img{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 6px;
}

.flow__online ul li dd{
    font-size: clamp(13px, 3.5vw, 16px);
    font-weight: 400;
    margin-top: 4px;    
}

.flow-list{
    margin-top: 20px;
    padding: 0 0 0;
}

.flow-list .list{margin-top: 12px;}
.flow-list h4{
    font-size: clamp(16px, 4vw, 18px);    
    font-weight: 600;    
}

.flow-list ul li{
    font-size: clamp(12px, 4vw, 14px); 
    font-weight: 400;
    padding-left: 15px;
    position: relative;
    margin-top: 6px; 
}

.flow-list ul li::before {
    content: '※';
    position: absolute;
    left: 0;
    top: calc(0.5em / 2 - 4px);
    width: 0;
    height: 0;
    background-color: #333;
    border-radius: 50%;
}

.list-text{margin-top: 4px;}
.list-text p{
    font-size: clamp(13px, 3.4vw, 14px);    
    font-weight: 400; 
}

/* staff */
.staff {
    background: url(../img/staff_bg.png);
    background-size: cover;
}
.staff__list {
    display: flex;
    flex-direction: column;
}

.staff__item {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
}
.staff__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding:  0 15px 0 0;
}

.staff__list > .staff__item:nth-child(even) .staff__profile{padding:  0 0 0 15px;}

.staff__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.staff__name {
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 5px;
}

.staff__bubble {
    font-size: 1.8rem;
    font-size: clamp(16px, 4vw, 18px);    
    font-weight: 400;
    position: relative;
    background-color: #fff;
    border-radius: 20px;
    padding: 15px;
    line-height: 1.8;
    width: 100%;
}

/* 吹き出しのしっぽ */
.staff__bubble::before {
    content: '';
    position: absolute;
    top: 70px;
    left: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 15px 0;
    border-color: transparent #fff transparent transparent;
}

.staff__list > .staff__item:nth-child(even) .staff__bubble::before {
    border-width: 0 0 15px 15px;
    right: -15px;
}

.staff__item.is-reverse {flex-direction: row-reverse;}
.staff__item.is-reverse .staff__bubble::before {
    left: auto;
    right: -10px;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #fff;
}

.staff h2{
    font-size: clamp(27px, 5vw, 34px);
    text-align: center;    
}
.staff .staff-text{
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.8;
}

/* --- Section 5: qa --- */
.qa .sec-box{padding: 60px 20px 0;}
.qa__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qa__item {
    padding-bottom: 20px;
    border-bottom: 1px solid #D8D8D8;
}

.qa__item dt,
.qa__item dd {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}

.qa__item dt{
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 600;
}

.qa__item dd {
    margin-top: 10px;
    font-size: clamp(12px, 3.8vw, 16px);
}

.qa__icon {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    margin-right: 10px;
    line-height: 0;
    flex-shrink: 0;
    font-size: 0;
}

.qa__icon.is-q {
    background-color: #0A5540;
    color: #fff;
}

.qa__icon.is-q:after{
    position: absolute;
    content: "";
    width: 19px;
    height: 19px;
    background: url(../img/icon_Q.svg) no-repeat;
}

.qa__icon.is-a {
    background-color: #fff;
    color: #0A5540;
    border: 1px solid #0A5540;
}

.qa__icon.is-a:after{
    position: absolute;
    content: "";
    width: 18px;
    height: 19px;
    background: url(../img/icon_A.svg) no-repeat;
}

/* --- Section 6: other --- */
.other .sec-box {
    text-align: center;
    padding: 60px 20px 0;    
}
.other .other-text{
    font-size: clamp(22px, 6vw, 27px);
    font-weight: 600;
}


/* --- Modal --- */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.modal__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(210, 210, 210, 0.8);
}

.modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 0;
    width: calc(100% - 16px);
    max-width: 500px;
    border-radius: 8px;
    border: solid 2px #707070;
}

.modal__close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    color: #888;
    cursor: pointer;
}

.modal__top{
    padding: 45px 20px 20px;
    position: relative;
}

.modal__top h2{font-size: clamp(18px, 5vw, 23px);}
.modal__top p{
    text-align: center;
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 400;
}

.modal__bottom{
    background: #F7F7F7;
    padding: 20px;
    overflow-y: auto;
    max-height: 65vh;
    border-radius: 0 0 5px 5px;
}

.modal__bottom-box{
    background: #fff;
    padding: 16px 20px 20px;    
    border-radius: 5px;
    margin-bottom: 20px;
}

.modal__bottom-box h3{
    color: #0A5540;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;    
}

.modal__bottom-box h4{margin-top: 14px;}
.modal__bottom-box p{
    font-size: clamp(12px, 3.1vw, 14px);    
    text-align: center;
    margin-top: 8px;    
}

.modal__bottom-box p.modal_b{font-weight: 600;}
.modal__bottom-box p.modal_b_l{
    font-weight: 500;
    text-align: left;
    margin-top: 0;
}

.modal__bottom-box .modal__img{
    margin-top: 12px;
    text-align: center;   
}

.modal__bottom-box .modal__img img{width: 80%;}

/* 表 */
.modal .tbl-inner{margin-top: 14px;}
.modal .tbl{margin-top: -1px;}
ul.ul_tbl{border: 1px solid #000;}
ul.ul_tbl li{border-bottom: solid 1px #000;}
ul.ul_tbl li:last-child {border-bottom: none;}
ul.ul_tbl .row {
    display: table;
    table-layout: auto;
    width: 100%;
}
        
ul.ul_tbl .col{
    display: table-cell;
    vertical-align: middle;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 1px 10px;     
}
        
ul.ul_tbl li .row > div:nth-child(1){
    width: 70%;
    border-right: solid 1px #000;
}

ul.ul_tbl li .row > div:nth-child(2){
    width: 30%;
    text-align: center;
}

.modal_desc{
    font-size: 1.2rem;
    font-weight: 400;
}

.modal .modal__top_close{
    position: absolute;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
    right: 15px;
    top: 15px;      
}

.modal .modal__top_close span{
    position: relative;
    display: block;
    width: 25px;
    height: 25px;    
}

.modal .modal__top_close span:before,
.modal .modal__top_close span:after{
  position: absolute;    
  content: ''; 
  width: 25px;
  height: 2px;
  background-color: #333;
  text-indent: -9999px;
  border-radius: 2px;
  top: 10px;
  left: 0;
}

.modal .modal__top_close span:before{transform: rotate(45deg);}
.modal .modal__top_close span:after{transform: rotate(-45deg);}

.feature-goods-txt{
   color: #8F8F8F;
   font-size: 1.1rem;
   font-weight: 400;
}

.feature-goods-txt.feature-goods-txt01,
.feature-goods-txt.feature-goods-txt02{
    padding-right: 20px;
    padding-top: 10px;
    text-align: right;    
}

.feature-goods-txt.feature-goods-txt03{
    padding-left: 20px;
    padding-top: 10px;
    text-align: left;    
}

.feature-goods-txt.feature-goods-txt04{
    position: absolute;
    bottom: -26px;
    right: 20px;
}

.feature-goods-txt.feature-goods-txt01.sp-only{text-align: center;}

/* =======================================
  SP Style
======================================= */
@media screen and (max-width: 874px) {
    .flow-list .list-text-ind{padding-left: 16px;}
}
/* =======================================
  PC Style
======================================= */
@media screen and (min-width: 875px) {
    .sp-only{display: none;}
    .pc-only{display: block;}

    .feature-goods-txt{font-size: 1.1rem;}
    .feature-goods-txt.feature-goods-txt01,
    .feature-goods-txt.feature-goods-txt02{
        padding-right: 50px;
        padding-top: 12px;
    }

    .feature-goods-txt.feature-goods-txt03{
        padding-left: 50px;
        padding-top: 12px;
    }
    
    .feature-goods-txt.feature-goods-txt04{
        bottom: -26px;
        right: 50px;
    }

    /* --- Layout --- */
    .sec-box {padding: 100px 40px;}

    /* --- Common Parts --- */
    h2 {
        font-size: 44px;
        margin-bottom: 50px;
    }
    h3 {font-size: 24px;}

    /* --- Section 1: mv --- */
    .mv__inner {
        flex-direction: row;
        justify-content: center;
        text-align: left;
        gap: 40px;
        max-width: 100%;
        align-items: flex-start;
        padding: 80px 1% 80px 2%;
    }
    .mv__text-content {flex-basis: 55%;}
    .mv__image-content {
        flex-basis: 45%;
        padding-top: 3%;
    }
    .mv__image-content  img{transform: rotate(15deg);}    
    .mv__icon-item img{
        width: 100%;
        height: auto;
    }

    .mv__text-content .mv__icons{display: flex;}
    .mv__text-content h1 {font-size: 36px;}
    .mv__image-content {
        margin-top: 0;
        width: auto;
    }

    .mv__icons {
        justify-content: flex-start;
        gap: 15px;
        padding: 0 13px;
    }

    .sec-box.mv__inner .mv__icons{display: none;}
    .mv .mv__text-content > .mv__icons{
        display: flex;
        margin-bottom: 0;
        padding: 0 13px;
        margin-top: 8%;
        width: 80%;    
    }
    .mv__icon-item span{
        font-size: 16px;
        margin-top: 12px;
    }

    /* intro */
    .intro .logo img{max-width: 627px;}
    .intro .sec-box{padding: 60px 20px 120px;}
    .intro .sec-box p{font-size: 23px;}
    .intro-list{
        max-width: 1000px;
        margin: 70px auto 0 auto;
        padding: 50px 20px 60px;
    }

    .intro h2{
        font-size: 30px;
        margin-bottom: 20px;  
    }
    .intro-icon{
        display: inline-block;
        width: 200px;
        padding: 0 40px 0 0;
    }
    .intro-icon img{max-width: 100%;}
    .intro-list .u-text{
        display: inline-block;
        width: 600px;        
    }
    .intro-list .u-text ul li{font-size: 20px;}
    .intro-list .u-text ul li::after{top: 22px;}

    /* --- Section 3: point --- */
    .point{
        background: url(../img/point_bg.png);
        background-size: cover;
    }

    .point .sec-box{padding: 100px 0 90px;}
    .point__item {
        flex-direction: row;
        align-items: center;
        gap: 5%;
    }
    .point__item + .point__item {margin-top: 60px;}
    .point__text-content {
        order: 1;
        flex-basis: 60%;
    }

    .point__image-content {
        order: 2;
        flex-basis: 40%;
    }

    .point .sec-box > div.point__item:nth-child(even) .point__text-content{
        margin-left: -13%;
        margin-top: -10%;        
        position: relative;
        z-index: 2;    
    }
    .point .sec-box > div.point__item:nth-child(odd) .point__text-content{
        margin-right: -20%;
        margin-top: 5%;
        position: relative;
        z-index: 2;    
    }    

    .point__item.is-reverse {flex-direction: row-reverse;}
    .point .sec-box{max-width: 100%;}
    /* .point .sec-box > div.point__item:nth-child(3) .point__image-content{margin-top: -15%;}
    .point .sec-box > div.point__item:nth-child(3) .point__image-content::before{
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 72%;
        background: #fff;
    } */

    .point__item > h3{display: none;}
    .point__text-content > h3{
        display: block;
        max-width: 550px;
    }

    .point .sec-box > div.point__item:nth-child(2n) h3{text-align: left;}
    .point h2{
        display: flex;
        align-items: center;
        justify-content: center;
        left: 50%;
        width: 100%;
        font-size: 39px;
        transform: translate(-50%, 0)!important;
        top: -38px;
    }

    .point h2 img{max-width: 536px;}
    .point .sec-box > div.point__item:nth-child(odd){padding: 0 0 0 15%;}
    .point .sec-box > div.point__item:nth-child(even){padding: 0 15% 0 0;}  
    .point .sec-box > div.point__item:nth-child(3) .point__image-content{margin-top: 0;}
    /* .point .sec-box > div.point__item:nth-child(3) .point__image-content img{width: 75%;} */
    .point__image-content{flex-basis: 100%;}
    .point h3{font-size: 59px;}
    .point h3 span{font-size: 108px;}    
    .point .point__sub_ttl{
        margin-top: 50px;
        font-size: 36px;
        line-height: 1.6;
    }

    .point .u-text{
        margin-top: 40px;
        font-size: 18px;
    }

    .point__link .modal-btn{
        display: inline-block;
        cursor: pointer;
        margin-top: 15px;
    }

    .flow__step::after{
        transform: translate(-50%, 0) rotate(-45deg);
        left: auto;
        bottom: auto;        
        top: 100px;
        right: -30px;
    }
    .about .about-ttl{
        margin: 0;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
    }
    .about-inner{
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .about .about-ttl p{
        font-size: 36px;
        padding: 0 18px;
    }
    .about .about-box{
        border: none;
        padding: 0;
        max-width: 1000px;
        margin: 0 auto;
    }
    .about .about-box::after{display: none;}
    .about .about-ttl div:nth-of-type(1) img {width: 180px;}
    .about .about-ttl div:nth-of-type(2) img{width: 250px;}
    .about .about-lead{
        margin-top: 8px;
        font-size: 18px;
    }
    .about .about-guid{padding: 120px 0 0;}
    .about .about-guid h2{font-size: 44px;}
    .about .about-guid p{
        font-size: 18px;
        text-align: center;
    }
    .about .about-price{
        text-align: center;
        margin-top: 20px;
    }
    .about .about-price img{max-width: 809px;}
    .about .about-price span{
        display: block;
        margin: 0 auto;
        max-width: 800px;
        text-align: right;
    }

    /* --- Section 4: about --- */
    .flow{padding: 0 20px 100px;}
    .flow-desc{text-align: left;}
    .flow-desc .flow-desc-text{
        width: 386px;
        text-align: center;
    }    
    .flow .sec-box{
        max-width: 1400px;
        padding: 40px 60px 68px;
    }
    .flow h3{font-size: 33px;}
    .flow__steps {
        flex-direction: row;
        justify-content: space-between;
        gap: 60px;
    }
    .flow__step {
        flex-basis: 31%;
        min-width: 180px;
    }
    .flow__steps > .flow__step:nth-of-type(2),
    .flow__steps > .flow__step:nth-of-type(3){padding-top: 37px;}
    .staff__item {gap: 30px;}
    .staff__icon {
        width: 100px;
        height: 100px;
    }
    .staff__item.is-reverse {
        flex-direction: row-reverse;
        padding: 0 100px 0 0;
    }
    .staff h2{
        font-size: 44px;
        margin-bottom: 40px;
    }
    .staff .staff-text{
        font-size: 18px;
        text-align: center;
    }
    .staff__list{
        margin-top: 25px;
    }

    .staff__icon{
        width: 176px;
        height: 176px;
    }
    .staff__name{
        font-size: 15px;
    }

    .staff__bubble{
        padding: 45px 50px;
        font-size: 18px;
    }

    .flow-list{
        border: none;
        max-width: 1278px;
        margin: 0 auto;
    }

    .flow__step::after{
        right: -45px;
        top: 36%;
        width: 20px;
        height: 20px;
    }

    .flow__text p{font-size: 16px;}
    .flow__online{
        max-width: 900px;
        margin: 0 auto;
    }
    .flow__online .ttl{font-size: 33px;}
    .flow__online p{font-size: 18px;}
    .flow__online ul li dl{display: flex;}
    .flow__online ul li dt{
        width: 40%;
        font-size: 21px;    
    }
    .flow__online ul li dd{
        width: 60%;
        font-size: 18px;
    }
    .flow__online ul li dt h4{font-size: 21px;}
    .flow-list{padding: 30px 0 0;}
    .flow-list .list{display: block;}
    .flow-list h4{font-size: 18px;}
    .flow-list ul li{
        font-size: 14px;
        margin-right: 8px;
    }

    .flow-list .list-text{
        display: flex;
        flex-wrap: wrap;
    }

    .flow-list .list-text p{
        margin-top: 10px;
        font-size: 14px;
    }

    .flow-list .list-text-ind p{
        text-indent: 16px;
        margin-top: 0;        
    }

    .flow__online ul li dt h4 img{margin-right: 15px;}
    .staff__list .staff__item{margin-top: 40px;}
    .staff__list .staff__item:nth-of-type(odd){padding: 0 0 0 100px;}
    .staff__list .staff__item:nth-of-type(oven){padding: 0 100px 0 0;}
    .staff__list > .staff__item .staff__bubble::before{
        border-width: 0 25px 25px 0;
        left: -25px;
        top: 120px;
    }

    .staff__list > .staff__item:nth-child(2n) .staff__bubble::before{
        border-width: 0 0 25px 25px;
        right: -25px;
        left: auto;
        top: 120px;
    }

    /* --- Section 5: qa --- */
    .qa__list{gap: 30px;}
    .qa__item{padding-bottom: 30px;}
    .qa__item dt{font-size: 22px;}
    .qa__item dd{
        font-size: 20px;
        font-weight: 400;
    }
    .qa__item dt,
    .qa__item dd{line-height: 1.3;}
    .other .other-text{font-size: 33px;}
    .other .sec-box{padding: 100px 20px 0;}
    /* --- modal --- */
    .modal__content{
        max-width: 1100px;
        border-radius: 20px;
    }
    .modal__top h2{
        font-size: 28px;
        color: #191919;
        margin: 0;
    }

    .modal__top {padding: 45px 20px 20px;}
    .modal__top p{font-size: 18px;}
    .modal__bottom{
        padding: 30px 25px;
        border-radius: 0 0 20px 20px;
    }
    .modal__bottom-box h3{font-size: 25px;}
    .modal__bottom-inner{
        display: flex;
        gap: 50px;
    }
    .modal__bottom-box h4{
        font-size: 15px;
        margin-top: 4px;
    }
    .modal__bottom-box p{font-size: 18px;}
    .modal__bottom-box{padding: 20px 50px 30px;}
    .modal__bottom-box .modal__img img{width: 100%;}
    .modal__bottom-box p.modal_b_l{font-size: 15px;}
    .modal_desc{font-size: 14px;}
    .tbl-inner{
        display: flex;
        gap: 20px;
    }

    .tbl-inner .tbl{flex: 1}
    ul.ul_tbl{border-left: 1px solid #000;}
    ul.ul_tbl .col{
        font-size: 12px;
        padding: 2px 6px;
    }

    ul.ul_tbl li .row > div:nth-child(1) {width: 80%;}
    ul.ul_tbl li .row > div:nth-child(2) {
        width: 20%;
        text-align: center;
        padding: 2px;
    }
}

@media screen and (min-width: 1200px) {
    .mv .mv__inner{padding: 80px 4% 80px 8%;}
    .mv .mv__icons {
        gap: 30px;
        margin-top: 70px;
    }
    .mv .mv__text-content > .mv__icons{
        display: flex;
        margin-bottom: 0;
        padding: 0 26px;    
    }
    .mv .mv__text-content{padding: 0 26px;}
    .mv__icon-item span{font-size: 18px;}
    .mv__text-content h1 {font-size: 2vw;}
}