@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */


/*--------------------------------
	フォント
--------------------------------*/

#axlsx3b_tobira {
	color: #505050;
	font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 500;
	font-style: normal;
}


/*--------------------------------
	メインビジュアル
--------------------------------*/
 
#mainVisual {
	position: relative;
	height: calc(100lvh - 220px);
	width: 100%;
	overflow: hidden;
 }

 #mainVisual .mv-img {
	width: 100%;
	height: 100%;
	background: url(./images/main-visual.jpg) no-repeat center;
	background-size: cover;
	/* アニメーション */
    opacity: 0;
    -webkit-transition: -webkit-transform 1s ease-out;
    transition: transform 1s ease-out;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	transform: translate3d(0, 0, 0) scale(1.03) rotate(0deg) !important;
}

#mainVisual .mv-img.io.move {
    -webkit-animation-name: imageBlur;
    animation-name: imageBlur;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
}

@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(30px);
    -moz-filter: blur(30px);
    -ms-filter: blur(30px);
    -o-filter: blur(30px);
    filter: blur(30px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}

#mainVisual .mv-ttl {
    overflow: hidden;
}

#mainVisual .mv-ttl span {
	display: inline-block;
	width: auto;
	background: #F8F1E8;
	font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 400;
	font-style: normal;
	padding: .6em 1.5em;
	font-size: 4rem;

    position: relative;
    overflow: hidden;
    
    -webkit-transition: opacity 0.8s ease 0.4s, -webkit-transform 1s cubic-bezier(0.87, 0, 0.13, 1) 0.2s;
    transition: opacity 0.8s ease 0.4s, transform 1s cubic-bezier(0.87, 0, 0.13, 1) 0.2s;
    /* GPU acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity, transform;
    
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0;
}
    

#mainVisual .mv-ttl span img {
	display: inline-block;
	height: 53px;
	width: 127px;
}

#mainVisual .mv-ttl span:nth-of-type(1) {
	position: absolute;
	top: 10%;
	right: 12%;
	z-index: 1;
}

#mainVisual .mv-ttl span:nth-of-type(2) {
	position: absolute;
	top: calc(10% +  2em);
	right: 0;
}

#mainVisual .mv-img.io + div span.slideDoor::after {
    content: "";
    width: 101%;
    height: 100%;
    background: transparent linear-gradient(90deg, #B5D3D6 0%, #EACCCB 50%, #DEC8A9 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.87, 0, 0.13, 1) 1s;
    transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1) 1s;
    /* GPU acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity, transform;

    -webkit-transform: translate3d(-1%, 0, 0);
    transform: translate3d(-1%, 0, 0);
}

#mainVisual .mv-ttl span:nth-of-type(2),
#mainVisual .mv-ttl span:nth-of-type(2)::after {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

#mainVisual .mv-img.io.move + div span.slideDoor {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

#mainVisual .mv-img.io.move + div span.slideDoor::after {
    -webkit-transform: translate3d(-101%, 0, 0);
    transform: translate3d(-101%, 0, 0);
}




/*--------------------------------
	イントロ
--------------------------------*/

#intro {
	background: #FAF2E7;
    border-top: 15px solid;
    border-image: linear-gradient(90deg, #B5D3D6 0%, #EACCCB 50%, #DEC8A9 100%) 1;
}

.intro_container {
	padding: 150px 5% 200px;
}

/* .intro_container .intro_logo em {
    display: block;
    margin-bottom: 1em;
    line-height: 1.8;
    font-size: 3.2rem;
    font-weight: 400;
} */

.intro_logo {
	max-width: 300px;
    margin: 2em auto 0;
}

.intro_container p {
    line-height: 2;
    font-size: 1.8rem;
    text-align: center;
}

/* サイズ調整 */
@media screen and (max-width: 1050px) and (min-width: 768px) {
    .intro_container {
        padding: 150px 5% 200px;
    }

    .intro_container .intro_logo img {
        max-width: 210px;
    }

   .intro_container .intro_logo em br {
        display: none;
    }


    .intro_container p {
        margin-block: 2em;
    }
}


/*--------------------------------
	サブ
--------------------------------*/

.sub_before {
    position: relative;
    width: 94%;
    max-width: 1200px;
    margin: -100px auto 100px;
    background: #fff;
    text-align: center;
}

.sub_before .sub_before_ttl {
    padding: 30px 0;
    border-bottom: 1px solid #707070;
}

.sub_before .sub_before_ttl > span {
    font-family: kinuta-shin-enpitsu-stdn, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 14rem;
}

.section-ttl,
.section-ttl {
    font-family: kinuta-shin-enpitsu-stdn, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 5rem;
    letter-spacing: .1em;
}

.section-ttl span em,
.section-ttl em {
    color: #D6929C;
    font-weight: 600;
}

.sub_before .sub_before_txt {
    position: relative;
    padding: 100px 0;
    line-height: 2.3;
    font-size: 2.2rem;
}

.sub_before .sub_before_txt:before {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 430px);
    top: 50px;
    width: 165px;
    height: 200px;
    background: url(./images/illust01-1.png) no-repeat center;
    background-size: contain;
}

.sub_before .sub_before_txt:after {
    content: "";
    display: block;
    position: absolute;
    right: calc(50% - 430px);
    top: 50px;
    width: 165px;
    height: 200px;
    background: url(./images/illust01-2.png) no-repeat center;
    background-size: contain;
}

.sub_before::after {
    content: "";
    display: block;
    position: absolute;
    right: calc(50% - 40px);
    bottom: -50px;
    width: 80px;
    height: 90px;
    background: url(./images/illust_yajirushi.png) no-repeat center;
    background-size: contain;
}

#sub02 .sub_before .sub_before_txt:before { background-image: url(./images/illust02-1.png); }
#sub02 .sub_before .sub_before_txt:after { background-image: url(./images/illust02-2.png); }

#sub03 .sub_before .sub_before_txt:before { background-image: url(./images/illust03-1.png); }
#sub03 .sub_before .sub_before_txt:after { background-image: url(./images/illust03-2.png); }

/* サイズ調整 */
@media screen and (max-width: 990px) {

    .sub_before .sub_before_ttl > span {
        font-size: 10rem;
    }

    .sub_before .sub_before_ttl div {
        font-size: 4rem;
        letter-spacing: 0;
    }

    .sub_before .sub_before_txt:after {
        right: calc(50% - 350px);
        top: 70px;
        width: 130px;
        height: 150px;
    }

    .sub_before .sub_before_txt:before {
        left: calc(50% - 350px);
        top: 70px;
        width: 123px;
        height: 150px;
    }
}

@media screen and (max-width: 1100px) {
    .sub_before::after {
        right: calc(50% - 38px);
        bottom: -50px;
        width: 77px;
        height: 87px;
    }
}

/* change! */

.sub_after .sub_after_pop {
    position: relative;
    width: 100%;
    height: 11.35vw;
    bottom: -1px;
    background: url(./images/bg_arch.svg) no-repeat center bottom;
    background-size: contain;
}

.sub_after .sub_after_pop span {
    display: block;
    text-align: center;
    position: absolute;
    bottom: -80px;
    left: calc(50% - 107px);
    width: 214px;
    height: auto;
    text-align: center;
    font-family: kinuta-shin-enpitsu-stdn, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 6rem;
    color: #D6929C;
}

.sub_after .sub_after_pop span::before {
    content: "";
    display: block;
    position: absolute;
    right: calc(50% - 200px);
    top: -100px;
    width: 400px;
    height: 130px;
    background: url(./images/illust_attention.png) no-repeat center;
    background-size: contain;
}

.sub_after .sub_after_wrap {
    overflow: hidden;
    padding: 100px 0;
    background: #F7F1E9;
}

.sub_after_txt {
    position: relative;
    max-width: 665px;
    width: 70%;
    margin: 50px auto 50px;
    background-image: linear-gradient(transparent 0, transparent 98%, #707070 100%);
    background-size: 100% 3em;
    line-height: 3em;
    text-align: center;
    font-size: 2.4rem;
}

.sub_after_txt:before {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - 450px);
    bottom: 0;
    width: 84px;
    height: 140px;
    background: url(./images/illust_kirakira-1.png) no-repeat center;
    background-size: contain;
}

.sub_after_txt:after {
    content: "";
    display: block;
    position: absolute;
    right: calc(50% - 450px);
    bottom: 0;
    width: 66px;
    height: 126px;
    background: url(./images/illust_kirakira-2.png) no-repeat center;
    background-size: contain;
}

/* サイズ調整 */
@media screen and (max-width: 990px) {
    .sub_after_txt {
        font-size: 2rem;
    }
    
    .sub_after_txt:before {
        left: -13%;
        bottom: 20px;
        width: 63px;
        height: 105px;
    }
    
    .sub_after_txt:after {
        content: "";
        display: block;
        position: absolute;
        right: -13%;
        bottom: 20px;
        width: 50px;
        height: 96px;
    }
    
}

.sub_after_img {
    padding: 0 3%;
    margin: 100px auto 200px;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

.sub_after_img > div {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

.sub_after_img > div span {
    display: block;
    width: 100%;
    height: 100%;
}

.sub_after_img div img {
    object-fit: cover;
}

.grid_img1 { grid-area: 1 / 1 / 5 / 4; }
.grid_img2 { grid-area: 1 / 4 / 5 / 10; }
.grid_img3 { grid-area: 5 / 1 / 10 / 8; }
.grid_img4 { grid-area: 5 / 8 / 7 / 10; }
.grid_img5 { grid-area: 7 / 8 / 10 / 10; }

#sub03 .grid_img4 { grid-area: 5 / 8 / 8 / 10; }
#sub03 .grid_img5 { grid-area: 8 / 8 / 10 / 10; }

/* 色変え */

#sub02 .sub_after .sub_after_pop {
    background-image: url(./images/bg_arch2.svg);
}

#sub03 .sub_after .sub_after_pop {
    background-image: url(./images/bg_arch3.svg);
}

#sub02 .sub_after .sub_after_wrap { background: #E9F1F3; }

#sub03 .sub_after .sub_after_wrap { background: #F7EDEC; }


/*--------------------------------
	商品
--------------------------------*/

#products {
    padding: 100px 0;
    border-top: 15px solid;
    border-image: linear-gradient(90deg, #B5D3D6 0%, #EACCCB 50%, #DEC8A9 100%) 1;
    background: url(./images/product_bg.jpg) no-repeat center;
    background-size: cover;
}

#products .base-width > p {
    text-align: center;
    font-size: 2.6rem;
    line-height: 2;
}

#products .products_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 50px auto 0;
    text-align: center;
}

#products .products_wrap .prod_img {
    max-width: 420px;
    width: 45%;
    font-size: 1.4rem;
}

#products .prod_link {
    text-align: center;
    margin: 50px auto 0;
}

#products .prod_link h3 {
    font-size: 5.3rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-weight: 500;
}

#products .prod_link .prod_link_btn {
    position: relative;
    max-width: 375px;
    width: 90%;
    height: 60px;
    line-height: 58px;
    margin: 30px auto 0;
    font-size: 2rem;
}

#products .prod_link .prod_link_btn a {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #79BBC4;
    border-radius: 30px;
    background: #fff;
    -webkit-transition: all .4s;
    transition: all .4s;
}

#products .prod_link .prod_link_btn:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 25px;
    top: calc(50% - 10px);
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: calc(tan(60deg) * 10px) solid #B5D3D7;
}


#products .prod_link .prod_link_btn a:hover {
    background: #79BBC4;
    text-decoration: none;
}

#products .prod_link .prod_link_btn a:hover:before {
    border-left: calc(tan(60deg) * 10px) solid #fff;
}

/*--------------------------------
	アニメーション
--------------------------------*/

.io:not(.order), .io.order > * {
    -webkit-transition: opacity 0.8s ease 0s, -webkit-transform 0.8s ease 0s;
    transition: opacity 0.8s ease 0s, transform 0.8s ease 0s;
    /* GPU acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* -webkit-transform: translate3d(0, 0, 0); */
    /* transform: translate3d(0, 0, 0); */
    will-change: opacity, transform;
}

.io {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.io:not(.order).move, .io.order.move > * {
    opacity: 1 !important;
    -webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
}

.io.order > *:nth-child(2) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.io.order > *:nth-child(3) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.io.order > *:nth-child(4) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.io.order > *:nth-child(5) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}


/*--------------------------------
	汎用
--------------------------------*/

.io:not(.order).fade, .io.order.fade > * {
    opacity: 0;
}

.io:not(.order).lr, .io.order.lr > * {
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
}

.io:not(.order).rl, .io.order.rl > * {
    -webkit-transform: translate3d(40px, 0, 0);
    transform: translate3d(40px, 0, 0);
}

.io:not(.order).upL, .io.order.upL > * {
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
}

.io:not(.order).upS, .io.order.upS > * {
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

.io:not(.order).downL, .io.order.downL > * {
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);
}

.io:not(.order).downS, .io.order.downS > * {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
}

.io:not(.order).scaleUp, .io.order.scaleUp > * {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

.io:not(.order).scaleDown, .io.order.scaleDown > * {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.io:not(.order).rotateL, .io.order.rotateL > * {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.io:not(.order).rotateR, .io.order.rotateR > * {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}


/*--------------------------------
    バウンス
--------------------------------*/

.io.bounce {
    opacity: 0;
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

.io .bounce {
    opacity: 0;
}

.io.move .bounce {
    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
    animation-timing-function: cubic-bezier(.215,.61,.355,1);
    animation: bounceInUp .5s both;
    /* GPU acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* -webkit-transform: translate3d(0, 0, 0); */
    /* transform: translate3d(0, 0, 0); */
    will-change: opacity, transform;
  }

@-webkit-keyframes bounceInUp {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale(0.6) translate3d(0,40px,0);
        transform: scale(0.6) translate3d(0,40px,0);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.1) translate3d(0,-20px,0);
        transform: scale(1.1) translate3d(0,-20px,0);
    }

    75% {
        -webkit-transform: scale(0.9) translate3d(0,10px,0);
        transform: scale(0.9) translate3d(0,10px,0);
    }

    90% {
        -webkit-transform: scale(1) translate3d(0,-5px,0);
        transform: scale(1) translate3d(0,-5px,0);
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes bounceInUp {
    0%,60%,75%,90%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale(0.6) translate3d(0,40px,0);
        transform: scale(0.6) translate3d(0,40px,0);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.1) translate3d(0,-20px,0);
        transform: scale(1.1) translate3d(0,-20px,0);
    }

    75% {
        -webkit-transform: scale(0.9) translate3d(0,10px,0);
        transform: scale(0.9) translate3d(0,10px,0);
    }

    90% {
        -webkit-transform: scale(1) translate3d(0,-5px,0);
        transform: scale(1) translate3d(0,-5px,0);
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}


/*--------------------------------
    スライド式 基本構造
--------------------------------*/

.io .slideDoor {
    position: relative;
    overflow: hidden;

    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.87, 0, 0.13, 1) 0.4s;
    transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1) 0.4s;
    /* GPU acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.io.move .slideDoor {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.io .slideDoor::after {
    content: "";
    width: 101%;
    height: 100%;
	background: transparent linear-gradient(90deg, #B5D3D6 0%, #EACCCB 50%, #DEC8A9 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.87, 0, 0.13, 1) 1.0s;
    transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1) 1.0s;
    /* GPU acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    
    -webkit-transform: translate3d(-1%, 0, 0);
    transform: translate3d(-1%, 0, 0);
}

.io.move .slideDoor::after {
    -webkit-transform: translate3d(-101%, 0, 0);
    transform: translate3d(-101%, 0, 0);
}

.io.order > *:nth-child(2) .slideDoor {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.io.order > *:nth-child(3) .slideDoor {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.io.order > *:nth-child(4) .slideDoor {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.io.order > *:nth-child(5) .slideDoor {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}

.io.order > *:nth-child(2) .slideDoor::after  {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.io.order > *:nth-child(3) .slideDoor::after  {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.io.order > *:nth-child(4) .slideDoor::after  {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.io.order > *:nth-child(5) .slideDoor::after  {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}


/*--------------------------------
    ズームアウト
    （※ホバー処理も遅延するのでホバー処理を変更する必要あり）
--------------------------------*/

.io .zoomOut img {
    -webkit-transition: -webkit-transform 0.8s cubic-bezier(.42,0,.16,1) 0.4s;
    transition: transform 0.8s cubic-bezier(.42,0,.16,1) 0.4s;
    /* GPU acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;

    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.io.move .zoomOut img {
    -webkit-transform: scale(1);
    transform: scale(1);
}



/* ====================================
	SP style
===================================== */
@media screen and (max-width: 767px) {

    /*--------------------------------
        メインビジュアル
    --------------------------------*/
    
    #mainVisual {
        height: calc(100lvh - 190px);
    }

    #mainVisual .mv-img {
       background-image: url(./images/main-visual_sp.jpg);
    }

    #mainVisual .mv-ttl span {
        padding: .4em 1em;
        font-size: 2rem;
    }

    #mainVisual .mv-ttl span img {
        height: 26px;
        width: 63px;
    }

    #mainVisual .mv-ttl span:nth-of-type(1) {
        top: 5%;
        right: 18%;
    }

    #mainVisual .mv-ttl span:nth-of-type(2) {
        top: calc(5% + 2.2em);
        right: 0;
    }


    /*--------------------------------
        イントロ
    --------------------------------*/

    .intro_container {
        padding: 50px 5% 150px;
    }

    /* .intro_container .intro_logo em {
        margin-bottom: 1em;
        font-size: 2.4rem;
        text-align: center;
    } */

    .intro_logo {
        max-width: 170px;
        margin: 2em auto 0;
    }

    .intro_container p {
        font-size: 1.6rem;
        text-align: left;
    }

    /*--------------------------------
        サブ
    --------------------------------*/

    .sub_before {
        width: 94%;
        margin: -100px auto 100px;
    }

    .sub_before .sub_before_ttl {
        padding: 20px 0 30px;
    }

    .sub_before .sub_before_ttl > span {
        font-size: 7.5rem;
    }

    .section-ttl {
        font-size: 2.8rem;
        letter-spacing: 0;
    }

    .sub_before .sub_before_txt {
        padding: 50px 0;
        line-height: 2;
        font-size: 1.6rem;
    }


    .sub_before .sub_before_txt:before {
        display: none;
    }

    .sub_before .sub_before_txt:after {
        display: block;
        margin: 2em auto 0;
        position: relative;
        left: 0;
        top: 0;
        width: 103px;
        height: 132px;
        background: url(./images/illust01-1_sp.png) no-repeat center;
        background-size: contain;
    }

    .sub_before::after {
        right: calc(50% - 26px);
        bottom: -50px;
        width: 46px;
        height: 53px;
    }

    #sub02 .sub_before .sub_before_txt:after {
        width: 109px;
        height: 115x;
        background-image: url(./images/illust02-1_sp.png);
    }

    #sub03 .sub_before .sub_before_txt:after {
        width: 124px;
        height: 121px;
        background-image: url(./images/illust03-1_sp.png);
    }

    /* change! */

    .sub_after .sub_after_pop span {
        bottom: -80px;
        left: calc(50% - 107px);
        width: 214px;
        font-size: 3.6rem;
    }

    .sub_after .sub_after_pop span::before {
        right: calc(50% - 131px);
        top: -90px;
        width: 263px;
        height: 106px;
    }

    .sub_after .sub_after_wrap {
        padding: 50px 0;
    }

    .sub_after_txt {
        width: 100%;
        margin: 50px auto 50px;
        padding: 0 3%;
        background-image: linear-gradient(transparent 0, transparent 98%, #707070 100%);
        background-size: 100% 2.5em;
        line-height: 2.5em;
        font-size: 1.6rem;
        text-align: left;
    }

    .sub_after_txt:before,
    .sub_after_txt:after {
        display: none;
    }

    .sub_after_img {
        padding: 0 3%;
        margin: 50px auto 100px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1.5fr 2.25fr 1fr;
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }

    .grid_img1 { grid-area: 1 / 1 / 2 / 2; }
    .grid_img2 { grid-area: 1 / 2 / 2 / 4; }
    .grid_img3 { grid-area: 2 / 1 / 3 / 4; }
    .grid_img4 { grid-area: 3 / 1 / 4 / 3; }
    .grid_img5 { grid-area: 3 / 3 / 4 / 4; }

    #sub03 .grid_img4 { grid-area: 3 / 1 / 4 / 3; }
    #sub03 .grid_img5 { grid-area: 3 / 3 / 4 / 4; }


    /*--------------------------------
        商品
    --------------------------------*/

    #products {
        padding: 30px 0 50px;
        background-image: url(./images/product_bg_sp.jpg);
    }

    #products .base-width > p {
        font-size: 1.6rem;
        line-height: 2;
    }

    #products .products_wrap {
        margin: 20px auto 0;
    }

    #products .products_wrap .prod_img {
        width: 50%;
        font-size: 1.1rem;
    }

    #products .prod_link {
        margin: 30px auto 0;
    }

    #products .prod_link h3 {
        font-size: 3.2rem;
    }

    #products .prod_link .prod_link_btn {
        max-width: 270px;
        height: 42px;
        line-height: 40px;
        margin: 20px auto 0;
        font-size: 1.6rem;
    }

    #products .prod_link .prod_link_btn a {
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid #79BBC4;
        border-radius: 30px;
        background: #fff;
        -webkit-transition: all .4s;
        transition: all .4s;
    }

    #products .prod_link .prod_link_btn:before {
        width: 12px;
        height: 12px;
        position: absolute;
        left: 20px;
        top: calc(50% - 6px);
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-left: calc(tan(60deg) * 6px) solid #B5D3D7;
    }

    #products .prod_link .prod_link_btn a:hover {
        background: #fff;
    }

    #products .prod_link .prod_link_btn a:hover:before {
        border-left: calc(tan(60deg) * 6px) solid #B5D3D7;
    }

}


/* ====================================
	PC style
===================================== */
@media screen and (min-width: 768px) {}