@charset "UTF-8";

/*!
Theme Name: Cocoon Child Aiony - Official
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* reset */

.content{
	margin-top:0;
}

.no-sidebar .content .main{
	padding:0;
}

.main .article{
    margin-bottom: 0;
}

.entry-content{
    margin: 0;
}

a:hover{
    color: var(--white);
}

.content-in.wrap{
    width: 100%;
}

.article p,
.article h2,
.article h3{
    margin-bottom: 0;
}

.article h2{
    background-color:transparent;
}

.article h3{
    border-style: none;
	padding: 0;
}

/************************************************ 
 common 
************************************************/

:root{
    --black:#222;
    --gray:#B3B3B3;
    --white:#FFF;
    --base-color:#FF8400;
    --accent-color:#FF5F00;
	--sub-color:#FFD9AA;
    --bg:#FFF9F2;
	--bg2:#FFEFE6;
}

.display-PC{
    display: block;
}

.display-SP{
    display: none;
}

.flex{
    display: flex;
	justify-content: space-between;
}

.text-left{
    text-align: left;
}

.bg{
    background-color: var(--bg);
}

.bg2{
    background-color: var(--bg2);
}

.grid-col-3 > .grid-item{
    width: 33.3%;
}

.notes{
    color: var(--gray);
    font-size: 12px;
}

/* ctaボタン */

p.btn-copy{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
}

.cta-btn{
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, rgb(255, 132, 0), rgb(255, 95, 0));
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    border-radius: 6px;
    padding: 22px 90px;
    outline: none;
    transition: ease .2s;
	width: 100%;
    box-sizing: border-box;
    max-width: 600px;
}

.btn-arrow::after{
    content: '';
    position: absolute;
    top:42%;
    right: 24px;
    width: 10px;
    height: 10px;
    border-top:  2px solid var(--white);
    border-right: 2px solid var(--white);
    transform: rotate(45deg);
    transition: all .5s;
}

.btn-arrow:hover::after{
    right: 16px;
}

/* ctaボタン */

/*CTA-area*/
/*固定ページのCTA*/
.bl_cta_area{
  width: 100vw;
   margin: 0 calc(50% - 50vw);
  background-color:var(--accent-color);
	margin-top:1.2rem;
}

.bl_cta_inner{
  margin:0 auto;
  width:100%;
  max-width:1200px;
  padding:60px 0;
}

.bl_cta_inner p{
  color:#fff;
  font-size:clamp(22px, 1.67vw,32px);
  font-weight:bold;
  text-align:center;
  margin:0 0 30px 0;
}

.bl_cta_inner .micro_copy{
	  margin:0 0 0.2rem 0;
}

.bl_cta_inner a{
  display:block;
  width:48vw;
  margin:0 auto;
  background-color:#fff;
  padding:1.2vw;
  border-radius:60px;
  border:3px solid #ffffff;
  box-shadow: 0px 4px 4px 0px rgba(51, 51, 51, 0.25);
  text-align:center;
  text-decoration:none;
  color:var(--accent-color);
  font-size:clamp(16px, 1.65vw,24px);
  font-weight:bold;
  transition: 0.3s ease-in-out;
}

.bl_cta_inner a:hover{
  transform: translateY(-5px);
	opacity:inherit;
}



@media screen and (max-width: 599px) {
	.bl_cta_inner a{
	padding:2vw;
	width:70vw;	
	}
}

/*各ページのCTAのマージン*/
/*introduction*/
/*hardware*/
/*linked_payment*/
.ly_cont.ly_cont10 + .bl_cta_area,
.introduction_linkbtn + .bl_cta_area,
.wp-block-group.hardware_sec2 + .bl_cta_area,
.wp-block-group.linked_payment_sec3 + .bl_cta_area{
	margin-top:1.2rem;
}

@media screen and (min-width: 600px) {
	.entry-content:has(.bl_cta_area){
		margin-bottom:0;
	}
}

/*CTA-area*/
/*固定ページのCTA*/

/* header */

.fixed-header{
box-shadow: 0 3px 6px rgba(255,132,0, .18);
}

.header-container-in.hlt-top-menu{
	padding: 4px 0;
	max-width:1200px;
	width:95%;
}

.hlt-tm-right .navi-in > ul {
	gap:16px;
}

.navi-in > ul li{
	width:172px;
	height:40px;
	line-height:40px;
	position:relative;
}

.navi .item-label{
	font-size:12px;
}

.navi .Request-Doc .item-label{
	color:var(--white);
	background: linear-gradient(90deg, rgb(255, 132, 0), rgb(255, 95, 0));
	border-radius:4px;
	transition: ease .2s;
}

.navi .Request-Doc .item-label::after{
    content: '';
    position: absolute;
    top:42%;
    right: 24px;
    width: 6px;
    height: 6px;
    border-top:  2px solid var(--white);
    border-right: 2px solid var(--white);
    transform: rotate(45deg);
    transition: all .5s;
}

.navi .Request-Doc .item-label:hover::after{
    right: 16px;
}

/* スクロール後もナビゲーション・メニューにサブメニュー（アコーディオン）を表示させる */
.fixed-header .has-sub {
    display: inline-block;
}
.fixed-header .navi-in > ul li:hover > ul  {
    display: block;
}
/* スクロール後もナビゲーション・メニューにサブメニュー（アコーディオン）を表示させる */

/*footer*/

.footer{
	margin-top:0;
}

.navi-footer-in a:hover{
	background-color:transparent;
	transition:0s;
}

.footer-text-area{
	text-align:right;
	font-size:12px;
}

.footer-right .widget{
	margin-bottom:0;
}

.footer-bottom{
	margin-top:0;
	margin-bottom:16px;
}

/* ハンバーガーメニュー */
/*×アイコンを移動*/
.menu-close-button {
 padding-top: 15px;
 padding-right: 25px;
 padding-bottom: 30px;
text-align: right;
}

/*モバイルメニュー背景色*/
.navi-menu-content {
background-color: #fffffff0;
}

.menu-drawer a {
line-height: 2rem;
border-bottom: solid 1px var(--gray);
}
/* sub-menuを親に持たない最後のli */
.menu-drawer:not(.sub-menu) > li:last-child{
	display: inline-block;
    background: linear-gradient(90deg, rgb(255, 132, 0), rgb(255, 95, 0));
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    border-radius: 6px;
    padding: 8px 90px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
	margin-top:16px;
}

.menu-drawer:not(.sub-menu) > li:last-child a{
	border-bottom:none;
	color:var(--white);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}



/************************************************ 
 LP 
************************************************/

/* MVContainer */
.MVContainer{
    width: 100%;
    max-height: 740px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    background-image:url(https://aiony.jp/wp-content/uploads/2025/03/Aiony_LP_MV.jpg);
    height: 100vw;
}

.MVWrap{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    max-height: 740px;
    height: 100vw;
    align-items: center;
}

.flex.MVWrap{
    justify-content: space-around;
}

.MV-textarea{
    margin-top: 80px;
    text-align: center;
    margin-bottom: 60px;
}

.MV-textarea .catch > img{
    text-align: left;
    vertical-align:baseline;
    max-width:460px;
	width:100%;
}

.MV-textarea img{
    max-width: 370px;
}

h2.MV-title{
    font-size: clamp(18px, 2.8vw, 30px);
    margin: 0 auto 40px;
	padding: 0;
}

.MV-title span{
    font-size: clamp(32px, 3vw, 48px);
    color: var(--accent-color);
}

.MV{

}

.MV img{
    vertical-align:top;
}

/* MVContainer */

/* section common */

.sectionWrap{
    width: 1200px;
    margin: 0 auto;
    padding: 60px 0;
	max-width:100%;
}

/* lead */

.lead-bg{
    margin-bottom: 0;
}

.sectionWrap.leadWrap{
    padding: 80px 0;
}

.lead-text{
    font-size: 24px;
    font-weight: 500;
    text-align: center;
	line-height: 2;
}

.lead-text span{
    color: var(--accent-color);
}

/* issue */

.issue-bg{
	margin-bottom: 0;
}

h2.sectionTitle{
    font-size: 36px;
    margin-top: 0;
    margin-bottom: 40px;
	padding:0;
}

.sectionTitle span{
    font-size: 44px;
    color: var(--accent-color);
}

.sectionWrap .grid-col-3{
	gap:42px;
}

.issue-item{
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(255, 132, 0, .2);
    width: 33.3%;
    text-align: center;
    padding: 40px 30px;
    position: relative;
    margin-top: 22px;
}

.issue-item::before{
    content: '';
    display: inline-block;
    width: 87px;/*画像の幅*/
    height: 44px;/*画像の高さ*/
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: -22px;
    left: 0;
}

.issue-item:first-child::before{
	background-image: url(https://aiony.jp/wp-content/uploads/2025/03/issue01.png);
}

.issue-item:nth-child(2)::before{
    background-image: url(https://aiony.jp/wp-content/uploads/2025/03/issue02.png);
}

.issue-item:nth-child(3)::before{
    background-image: url(https://aiony.jp/wp-content/uploads/2025/03/issue03.png);
}

.issue-item img{
    margin-bottom: 30px;
}

.issue-item p{
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}


/* solution */

.solution-bg{
    margin-bottom: 0;
}

.sectionTable{
    display: table;
    width: 100%;
    margin-bottom: 40px;
}

.sectionTable h2 {
    display: table-cell;
    text-align: left;
}

.sectionTitle .notes {
    display: table-cell;
    text-align: right;
	font-size:12px;
}

.sectionWrap .solution-area{
    flex-wrap: wrap;
    gap:40px 5%;
}

.solution-item{
    background-color: var(--bg2);
    border-radius: 8px;
    padding: 56px 30px 30px;
    position: relative;
    margin-top: 26px;
    width: 47%;
    box-sizing: border-box;
}

.solution-item::before{
    content: '';
    display: inline-block;
    width: 144px;/*画像の幅*/
    height: 52px;/*画像の高さ*/
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: -26px;
    left: 0;
}

.solution-item:first-child:before{
    background-image: url(https://aiony.jp/wp-content/uploads/2025/03/solution01.png);
}

.solution-item:nth-child(2)::before{
    background-image: url(https://aiony.jp/wp-content/uploads/2025/03/solution02.png);
}

.solution-item:nth-child(3)::before{
    background-image: url(https://aiony.jp/wp-content/uploads/2025/03/solution03.png);
}

.solution-item:nth-child(4)::before{
    background-image: url(https://aiony.jp/wp-content/uploads/2025/03/solution04.png);
}

.solution-item img{
    margin-bottom: 30px;
    border-radius: 10px;
}

.solution-item p{
    text-align: left;
}

p.solution-lead{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.btnWrap{
    text-align: center;
    margin-top: 60px;
}

/* function */

.function-bg{
    margin-bottom: 0;
}

.sectionWrap .function-area{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px 3%;
    justify-content: center;
	padding: 0 16px;
}

.function-item{
    background-color: var(--white);
	height:0;
	padding-bottom:100%;
	position:relative;
    text-align: center;
    border-radius: 50%;
    box-sizing: border-box;
}

.grid-item-wrap{
	position:absolute;
	top: 2.5rem;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.grid-item-wrap img{
	width:36%;
}

.function-item p{
    font-size: 16px;
    font-weight: 500;
	line-height:1.4;
}

.function-item p.notes{
    font-size: 14px;
    color: var(--black);
}

/* square */

.square-bg{
    margin-bottom: 0;
}

.square-img{
	width:100%;
}

.square-img img{
    border-radius: 10px;
	width: 100%;
}

.sectionWrap .square-area{
    gap:40px;
	align-items: flex-start;
}

.square-text{
    margin: 0 auto;
    text-align: center;
	width:100%;
	margin-bottom: 40px;
}

.square-text img{
    margin: 30px auto 40px;
	
}

.square-description{
    text-align: left;
	font-size: 14px;
}

.display-SP.square-description{
    margin-bottom: 40px;
}

.squareWrap .notes{
    color: var(--base-color);
    margin-bottom: 40px;
}

.payment-list{
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255, 132, 0, .2);
}

.payment-list img{
    width: 100%;
}

/* price */

.price-bg{
    margin-bottom: 0;
}

.price-area{
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(255, 132, 0, .2);
    padding: 40px 60px;
	margin-bottom:40px;
}

.price{
    text-align: center;
    font-size: 44px;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.price span{
    font-family: "Inter";
    color: var(--black);
    font-size: 80px;
}

.price .tax{
    font-size: 24px;
    color: var(--accent-color);
}

.price-area .notes{
    color: var(--black);
    font-weight: 300;
}

/* campaign */

p.campaign-title{
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 16px;
}

.campaign-img{
	text-align:center;
}

.campaign .btnWrap{
	margin-top:24px;
}


/* flow */

.flow-bg{
    margin-bottom: 0;
}

.flow-area{
    display: flex;
    background-color: var(--bg);
    padding: 20px;
    border-radius: 10px;
    align-items: center;
    margin-bottom: 20px;
}

.flow-area img{
    margin-right: 30px;
}

.flow-area:nth-of-type(4){
    margin-bottom: 50px;
}

.stepWrap{
   display: flex;
	align-items: center;
   background-color: var(--white);
   min-width: 25%;
   border-radius: 10px;
   margin-right: 30px;
	flex-basis: 30%;
}

.step-tag{
    font-family: "Inter";
    font-weight: 700;
    font-size: 20px;
    padding: 10px 18px;
    background-color: var(--base-color);
    border-radius: 10px 0 0 10px;
    color: var(--sub-color);
    /* width: 118px; */ /* ワードプレス用 */
    flex-basis: 45%;
}

.step-tag span{
    color: var(--white);
    font-size: 32px;
}

h3.flow-title{
    font-size: 20px;
    padding-left: 20px;
    background-color: var(--white);
    flex-basis: 55%;
}

.flow-description{
    flex-basis: 70%;
}

.flow-description p{
    font-size: 14px;
}

.cta-area{
    border-radius: 10px;
    padding: 40px 30px;
}

.cta-area .btnWrap{
    margin-top: 40px;
}

p.cta-areatitle{
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 30px;
}

.cta-area-description{
    font-size: 20px;
    padding-top: 30px;
    border-top: 2px dotted var(--accent-color);
}

/* support */

.support-bg{
    margin-bottom: 0;
}

.support-area{
    gap: 40px;
    margin: 0;
    align-items: center;
}

.support-area img{
    border-radius: 10px;
	width:50vw;
}

.time-text{
    font-size: 16px;
}

p.support-description{
    margin-bottom: 30px;
}

.time-area{
    background-color: var(--white);
    border-radius: 10px;
    padding: 20px;
}

.time{
    padding-bottom: 15px;
}

.time span{
    color: var(--base-color);
    font-weight: 700;
    padding-right: 15px;
}

.time-description{
    font-size: 14px;
}

/* faq*/

.faq-bg{
    margin-bottom: 0;
}

.faq-box {
    margin: 0 auto;
}

.faq-box .faq dt,
.faq-box .faq dd {
    display: flex;
    align-items: baseline;
    margin: 0;
}

.faq-box .faq dt {
    background:var(--bg2);
    border-radius: 10px 10px 0 0;
}

.faq-box .faq dd {
    background:var(--bg);
    border-radius: 0 0 10px 10px;
    margin-bottom: 30px;
}

.faq-box .faq dt p {
    margin: 0;
    padding-left: 15px;
    width: 100%;
    font-size: 20px;
    font-weight: 500;
}

.faq-box .faq dd p {
    margin: 0;
    padding: 20px;
    width: 100%;
	font-size:16px;
}

.faq-box .faq dt::before {
    font-family: "Inter";
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    background:var(--accent-color);
    width: 100px;
    height: 2em;
    font-weight: 700;
    font-size: 28px;
    border-radius: 10px 0 0 0;
}

.faq-box .faq:first-of-type dt::before{
    content: "Q1";
}

.faq-box .faq:nth-of-type(2) dt::before{
    content: "Q2";
}

.faq-box .faq:nth-of-type(3) dt::before{
    content: "Q3";
}

.faq-box .faq:nth-of-type(4) dt::before{
    content: "Q4";
}

.faq-box .faq:nth-of-type(5) dt::before{
    content: "Q5";
}

.faq-box .faq dd::before {
    font-family: "Inter";
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--base-color);
    background: var(--bg);
    width: 100px;
    height: 2em;
    font-weight: 700;
    font-size: 28px;
    border-radius: 0 0 0 10px;
}

.faq-box .faq:first-of-type dd::before{
    content: "A1";
}

.faq-box .faq:nth-of-type(2) dd::before{
    content: "A2";
}

.faq-box .faq:nth-of-type(3) dd::before{
    content: "A3";
}

.faq-box .faq:nth-of-type(4) dd::before{
    content: "A4";
}

.faq-box .faq:nth-of-type(5) dd::before{
    content: "A5";
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	.logo-menu-button img {
        margin-left: 0;
    }
	
	.mobile-menu-buttons .menu-icon {
      font-size: 30px;
    }

    .mobile-menu-buttons .menu-caption{
		display: none;
/*         position: relative;
        background: linear-gradient(90deg, rgb(255, 132, 0), rgb(255, 95, 0));
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        border-radius: 6px;
        padding: 10px 12px;
        outline: none; */
    }
	
	.mobile-menu-buttons .menu-button {
		width: 40px;
		justify-content: normal;
}

	/*ハンバーガーメニュー右から*/
	.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
	
	.header-container-in.hlt-top-menu{
        padding: 0;
    }
	
	.MVWrap,
	.sectionWrap{
        width: 95%;
    }
    
    h2.sectionTitle{
        font-size: 24px;
    }
    .sectionTitle span{
        font-size: 32px;
    }
	
	.lead-text{
        font-size: 20px;
    }

    .issue-item p{
        font-size: 16px;
    }

    p.solution-lead{
        font-size: 20px;
    }
	
	.sectionWrap .function-area{
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
	
	.grid-item-wrap{
	top: 2rem;
	}
	
    .function-item p{
        font-size: 14px;
    }
	
	.function-item p.notes{
    font-size: 12px;
	}

    .price{
        font-size: 32px;
    }

    .price span{
        font-size: 68px;
    }

    .price .tax{
        font-size: 20px;
    }
	
	p.campaign-title{
		font-size:24px;
	}
	
	p.campaign-title .display-SP{
		display:block;
	}
	
	

    h3.flow-title{
        font-size: 16px;
    }

    p.cta-areatitle{
        font-size: 24px;
    }

    .cta-area-description{
        font-size: 16px;
    }

    .time-text{
        font-size: 14px;
    }

    .time-description{
        font-size: 12px;
    }

    .faq-box .faq dt p{
        font-size: 16px;
    }

    .faq-box .faq dd p{
        font-size: 12px;
    }
    
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	.function-item .display-PC{
        display: none;
    }
	
	.time-area.display-PC,
    .square-description.display-PC{
        display: none;
    }

    .square-description.display-SP,
    .time-area.display-SP{
		display:block;
	}
	
	.cta-btn{
        padding: 17px 90px;
    }
	
	.MVContainer,
    .MVWrap{
        height: 600px;
    }
	
	h2.MV-title{
        margin-bottom:20px;
    }
	
	.MV-textarea{
        margin-top: 0;
        margin-bottom:40px;
        flex-basis: 80%;
    }
	
	.MV-textarea img{
        max-width: 260px;
    }
	
	.MV {
        width: 60%;
    }
	
	.btnWrap{
		margin-top:30px;
	}
    
    .btn-arrow::after{
        top:42%;
    }
    
    .btn-arrow:hover::after{
        right: 16px;
    }
	
	.sectionWrap{
        padding: 50px 0;
    }
	
	.stepWrap{
        flex-basis: 40%;
    }
	
	.step-tag{
        flex-basis: 40%;
    }

    h3.flow-title{
        flex-basis: 60%;
    }

    .flow-description{
        flex-basis: 60%;
    }
	
	.sectionWrap .square-area {
        gap: 20px;
    }

    .squareWrap .notes{
        margin-bottom: 30px;
    }

    .square-text{
        width: 60%;
    }
	
	.price-area{
        padding: 40px 30px;
    }
	
	.step-tag{
        font-size: 14px;
		padding:10px 14px;
    }
	
	.step-tag span{
        font-size: 24px;
    }
	
	h3.flow-title{
        padding-left: 15px;
    }
	
	.time-area{
        margin-top: 30px;
    }
	
	.footer-text-area{
        text-align: center;
    }
	
}

/*599px以下*/
@media screen and (max-width: 599px){
	.sectionWrap .function-area{
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
	}
	
	.grid-item-wrap{
	top: 1rem;
	}
	
	.function-item p{
        font-size: 12px;
    }
	
	.function-item p.notes{
    font-size: 10px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	
	    .MVContainer.display-PC{
        display: none;
    }

    .MVSPContainer.display-SP{
        display: block;
		margin-bottom: 0;
    }
	
	.MV-textarea{
        width: 95%;
        margin: 10px auto 0;
    }
	
	.h2.MV-title{
        margin-bottom: 10px;
    }

    .btnWrap{
        margin-top: 10px;
    }
	
	    .cta-btn{
        font-size: 16px;
        padding: 13px 50px;
    }

    .btn-arrow::after{
        width: 8px;
        height: 8px;
    }
	
	.MVContainer .flex{
        flex-direction: column-reverse;
    }
	
	.sectionWrap.leadWrap{
        padding: 40px 0;
    }
	
	.flex.issue-area{
        flex-direction: column;
    }
	
	.grid-col-3 > .grid-item{
    width: 100%;
	}
	
	h2.sectionTitle{
        display: block;
    }
	
	.sectionTitle .display-SP{
		display:block;
	}

    .solution-bg .notes{
        text-align: right;
    }

    .solution-item{
        width: 100%;
    }
	
	.sectionWrap .square-area{
        flex-direction: column;
    }
	
	.square-text{
        width: 100%;
    }
	
	.payment-list{
        box-shadow: 0 0 20px rgba(255, 132, 0, .1);
    }
	
	.price-area{
        font-size: 20px;
    }

    .price span{
        font-size: 48px;
    }

    .price .tax{
        font-size: 14px;
    }
	
	.flow-area{
        flex-direction: column;
        align-items: flex-start;
    }
	
	.flow-area img{
        margin-bottom: 15px;
    }

    .stepWrap{
        width: 70%;
		margin-bottom: 15px;
    }

    .step-tag{
        flex-basis: 40%;
        padding: 10px;
    }
	
	.support-area{
        flex-direction: column;
    }

    .support-area img{
        width: 100%;
    }

	
}