@charset "UTF-8";
/* base style.cssから */
img {
	max-width: 100%;
	height:auto;
	line-height:0;
	vertical-align:top;
}

/* Common style
---------------------------------*/
.txt-center,
.stxt-center {
	text-align: center;
}
@media (max-width: 767px){
	.stxt-center { text-align: left; }
}

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

.block { display: block;}
.iblock { display: inline-block;}

/* flex ---------------- */
.flex {
	display: flex;
	flex-wrap: wrap;
}
/* テキストリンク */
a.txtlink {
	color: #eb4d18;
	text-decoration: underline;
    text-underline-offset: 3px;
    transition: all 0.25s ease;
}
a.tri-yel{
    display: inline-block;
    position: relative;
    padding-left: 1.5em;
    word-break: break-all;
}
a.tri-yel::before{
    content: "";
    display: block;
    width: 1em;
    height: 1.3em;
    background-color: #fabe00;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    position: absolute;
    top: 1em;
    left: 0;
    transform: translateY(-50%);
    transition: all 0.25s ease;
}
@media (min-width: 768px){
    a.txtlink:hover {
        text-decoration-color: transparent;
    }
    a:hover.tri-yel::before{
        left: 4px;
    }
}
/* annotation ---------------- */
.annotation{
    text-indent: -1em;
    padding-left: 1em;
}
.annotation::before{
    content: "※";
}

.marker-yel{
    background: linear-gradient(transparent 60%, #ffe955 60%);
    padding: 0 3px;
}

/* object fit --------------------- */
/* font weight --------------------------------------*/
.f-bold { font-weight: bold;}
.f-normal { font-weight: normal;}
.f-w100 { font-weight: 100;}
.f-w200 { font-weight: 200;}
.f-w300 { font-weight: 300;}
.f-w400 { font-weight: 400;}
.f-w500 { font-weight: 500;}
.f-w600 { font-weight: 600;}
.f-w700 { font-weight: 700;}
.f-w800 { font-weight: 800;}
.f-w900 { font-weight: 900;}

/* line height --------------------------------------*/
.f-lh1 { line-height: 1;}
.f-lh12 { line-height: 1.2;}
.f-lh13 { line-height: 1.3;}
.f-lh14 { line-height: 1.4;}
.f-lh15 { line-height: 1.5;}
.f-lh16 { line-height: 1.6;}
.f-lh17 { line-height: 1.7;}
.f-lh2 { line-height: 2;}

/* letter spacing --------------------------------------*/
.f-ls300 {letter-spacing: 0.3em;}
.f-ls100 {letter-spacing: 0.1em;}
.f-ls50 {letter-spacing: 0.05em;}

/* font size --------------------------------------*/
.f-sz10 { font-size: 1.0rem;}
.f-sz11 { font-size: 1.1rem;}
.f-sz12 { font-size: 1.2rem;}
.f-sz13 { font-size: 1.3rem;}
.f-sz14 { font-size: 1.4rem;}
.f-sz15 { font-size: 1.5rem; font-size: clamp(1.4rem, 1.3328rem + 0.14vw, 1.5rem);}
.f-sz16 { font-size: 1.6rem; font-size: clamp(1.5rem, 1.4336rem + 0.14vw, 1.6rem);}
.f-sz17 { font-size: 1.7rem; font-size: clamp(1.6rem, 1.5328rem + 0.14vw, 1.7rem);}
.f-sz18 { font-size: 1.8rem; font-size: clamp(1.7rem, 1.6336rem + 0.14vw, 1.8rem);}
.f-sz19 { font-size: 1.9rem; font-size: clamp(1.75rem, 1.6496rem + 0.21vw, 1.9rem);}
.f-sz20 { font-size: 2.0rem; font-size: clamp(1.8rem, 1.6672rem + 0.28vw, 2rem);}
.f-sz21 { font-size: 2.1rem; font-size: clamp(1.85rem, 1.6832rem + 0.35vw, 2.1rem);}
.f-sz22 { font-size: 2.2rem; font-size: clamp(1.9rem, 1.7008rem + 0.42vw, 2.2rem);}
.f-sz23 { font-size: 2.3rem; font-size: clamp(1.95rem, 1.7168rem + 0.49vw, 2.3rem);}
.f-sz24 { font-size: 2.4rem; font-size: clamp(2rem, 1.7328rem + 0.56vw, 2.4rem);}
.f-sz25 { font-size: 2.5rem; font-size: clamp(2rem, 1.6672rem + 0.69vw, 2.5rem);}
.f-sz26 { font-size: 2.6rem; font-size: clamp(2.1rem, 1.7664rem + 0.69vw, 2.6rem);}
.f-sz27 { font-size: 2.7rem; font-size: clamp(2.1rem, 1.7008rem + 0.83vw, 2.7rem);}
.f-sz28 { font-size: 2.8rem; font-size: clamp(2.2rem, 1.8rem + 0.83vw, 2.8rem);}
.f-sz29 { font-size: 2.9rem; font-size: clamp(2.2rem, 1.7328rem + 0.97vw, 2.9rem);}
.f-sz30 { font-size: 3.0rem; font-size: clamp(2.3rem, 1.8336rem + 0.97vw, 3rem);}
.f-sz31 { font-size: 3.1rem; font-size: clamp(2.3rem, 1.7664rem + 1.11vw, 3.1rem);}
.f-sz32 { font-size: 3.2rem; font-size: clamp(2.4rem, 1.8672rem + 1.11vw, 3.2rem);}
.f-sz33 { font-size: 3.3rem; font-size: clamp(2.4rem, 1.8rem + 1.25vw, 3.3rem);}
.f-sz34 { font-size: 3.4rem; font-size: clamp(2.5rem, 1.9008rem + 1.25vw, 3.4rem);}
.f-sz35 { font-size: 3.5rem; font-size: clamp(2.5rem, 1.8336rem + 1.39vw, 3.5rem);}
.f-sz36 { font-size: 3.6rem; font-size: clamp(2.6rem, 1.9328rem + 1.39vw, 3.6rem);}
.f-sz37 { font-size: 3.7rem; font-size: clamp(2.6rem, 1.8672rem + 1.53vw, 3.7rem);}
.f-sz38 { font-size: 3.8rem; font-size: clamp(2.7rem, 1.9664rem + 1.53vw, 3.8rem);}
.f-sz39 { font-size: 3.9rem; font-size: clamp(2.7rem, 1.9008rem + 1.67vw, 3.9rem);}
.f-sz40 { font-size: 4.0rem; font-size: clamp(2.8rem, 2rem + 1.67vw, 4rem);}
.f-sz41 { font-size: 4.1rem; font-size: clamp(2.8rem, 1.9328rem + 1.81vw, 4.1rem);}
.f-sz42 { font-size: 4.2rem; font-size: clamp(2.9rem, 2.0336rem + 1.81vw, 4.2rem);}
.f-sz43 { font-size: 4.3rem; font-size: clamp(2.9rem, 1.9664rem + 1.94vw, 4.3rem);}
.f-sz44 { font-size: 4.4rem; font-size: clamp(3rem, 2.0672rem + 1.94vw, 4.4rem);}
.f-sz45 { font-size: 4.5rem; font-size: clamp(3rem, 2rem + 2.08vw, 4.5rem);}
.f-sz46 { font-size: 4.6rem; font-size: clamp(3.1rem, 2.1008rem + 2.08vw, 4.6rem);}
.f-sz47 { font-size: 4.7rem; font-size: clamp(3.1rem, 2.0336rem + 2.22vw, 4.7rem);}
.f-sz48 { font-size: 4.8rem; font-size: clamp(3.2rem, 2.1328rem + 2.22vw, 4.8rem);}
.f-sz49 { font-size: 4.9rem; font-size: clamp(3.2rem, 2.0672rem + 2.36vw, 4.9rem);}
.f-sz50 { font-size: 5.0rem; font-size: clamp(3.3rem, 2.1664rem + 2.36vw, 5rem);}
.f-sz51 { font-size: 5.1rem; font-size: clamp(3.3rem, 2.1008rem + 2.50vw, 5.1rem);}
.f-sz52 { font-size: 5.2rem; font-size: clamp(3.4rem, 2.2rem + 2.50vw, 5.2rem);}
.f-sz53 { font-size: 5.3rem; font-size: clamp(3.4rem, 2.1328rem + 2.64vw, 5.3rem);}
.f-sz54 { font-size: 5.4rem; font-size: clamp(3.5rem, 2.2336rem + 2.64vw, 5.4rem);}
.f-sz55 { font-size: 5.5rem; font-size: clamp(3.5rem, 2.1664rem + 2.78vw, 5.5rem);}
.f-sz56 { font-size: 5.6rem; font-size: clamp(3.6rem, 2.2672rem + 2.78vw, 5.6rem);}
.f-sz57 { font-size: 5.7rem; font-size: clamp(3.6rem, 2.2rem + 2.92vw, 5.7rem);}
.f-sz58 { font-size: 5.8rem; font-size: clamp(3.7rem, 2.3008rem + 2.92vw, 5.8rem);}
.f-sz59 { font-size: 5.9rem; font-size: clamp(3.7rem, 2.2336rem + 3.06vw, 5.9rem);}
.f-sz60 { font-size: 6.0rem; font-size: clamp(3.8rem, 2.3328rem + 3.06vw, 6rem);}
.f-sz62 { font-size: 6.2rem; font-size: clamp(3.8rem, 2.2rem + 3.33vw, 6.2rem);}
.f-sz64 { font-size: 6.4rem; font-size: clamp(3.9rem, 2.2336rem + 3.47vw, 6.4rem);}
.f-sz66 { font-size: 6.6rem; font-size: clamp(3.9rem, 2.1008rem + 3.75vw, 6.6rem);}
.f-sz68 { font-size: 6.8rem; font-size: clamp(4rem, 2.1328rem + 3.89vw, 6.8rem);}
.f-sz70 { font-size: 7.0rem; font-size: clamp(4.2rem, 2.3328rem + 3.89vw, 7rem);}
.f-sz72 { font-size: 7.2rem; font-size: clamp(4.4rem, 2.5328rem + 3.89vw, 7.2rem);}
.f-sz76 { font-size: 7.6rem; font-size: clamp(4.6rem, 2.6rem + 4.17vw, 7.6rem);}
.f-sz80 { font-size: 8.0rem; font-size: clamp(4.8rem, 2.6672rem + 4.44vw, 8rem);}
.f-sz85 { font-size: 8.5rem; font-size: clamp(5rem, 2.6672rem + 4.86vw, 8.5rem);}
.f-sz90 { font-size: 9.0rem; font-size: clamp(5rem, 2.3328rem + 5.56vw, 9rem);}
.f-sz95 { font-size: 9.5rem; font-size: clamp(5.5rem, 2.8336rem + 5.56vw, 9.5rem);}
.f-sz100 { font-size: 10.0rem; font-size: clamp(5.5rem, 2.5008rem + 6.25vw, 10rem);}
.f-sz110 { font-size: 11.0rem; font-size: clamp(5.5rem, 1.8336rem + 7.64vw, 11rem);}

/* padding */
.pt130 { padding-top:7.5rem; padding-top: clamp(7.5rem, 3.8336rem + 7.64vw, 13rem);}
.pt120 { padding-top:7rem; padding-top: clamp(7rem, 3.6672rem + 6.94vw, 12rem);}
.pt110 { padding-top:6.5rem; padding-top: clamp(6.5rem, 3.5008rem + 6.25vw, 11rem);}
.pt100 { padding-top:6rem; padding-top: clamp(6rem, 3.3328rem + 5.56vw, 10rem);}
.pt90 { padding-top:5.5rem; padding-top: clamp(5.5rem, 3.1664rem + 4.86vw, 9rem);}
.pt80 { padding-top:5rem; padding-top: clamp(5rem, 3rem + 4.17vw, 8rem);}
.pt70 { padding-top:4.5rem; padding-top: clamp(4.5rem, 2.8336rem + 3.47vw, 7rem);}
.pt60 { padding-top:4rem; padding-top: clamp(4rem, 2.6672rem + 2.78vw, 6rem);}
.pt50 { padding-top:3.5rem; padding-top: clamp(3.5rem, 2.5008rem + 2.08vw, 5rem);}
.pt40 { padding-top:3rem; padding-top: clamp(3rem, 2.3328rem + 1.39vw, 4rem);}
.pt30 { padding-top:2.5rem; padding-top: clamp(2.5rem, 2.1664rem + 0.69vw, 3rem);}
.pt20 { padding-top:1.5rem; padding-top: clamp(1.5rem, 1.1664rem + 0.69vw, 2rem);}
.pt15 {	padding-top: 15px;}
.pt10 {	padding-top: 10px;}
.pt5 { padding-top: 5px;}

.pb130 { padding-bottom:7.5rem; padding-bottom: clamp(7.5rem, 3.8336rem + 7.64vw, 13rem);}
.pb120 { padding-bottom:7rem; padding-bottom: clamp(7rem, 3.6672rem + 6.94vw, 12rem);}
.pb110 { padding-bottom:6.5rem; padding-bottom: clamp(6.5rem, 3.5008rem + 6.25vw, 11rem);}
.pb100 { padding-bottom:6rem; padding-bottom: clamp(6rem, 3.3328rem + 5.56vw, 10rem);}
.pb90 { padding-bottom:5.5rem; padding-bottom: clamp(5.5rem, 3.1664rem + 4.86vw, 9rem);}
.pb80 { padding-bottom:5rem; padding-bottom: clamp(5rem, 3rem + 4.17vw, 8rem);}
.pb70 { padding-bottom:4.5rem; padding-bottom: clamp(4.5rem, 2.8336rem + 3.47vw, 7rem);}
.pb60 { padding-bottom:4rem; padding-bottom: clamp(4rem, 2.6672rem + 2.78vw, 6rem);}
.pb50 { padding-bottom:3.5rem; padding-bottom: clamp(3.5rem, 2.5008rem + 2.08vw, 5rem);}
.pb40 { padding-bottom:3rem; padding-bottom: clamp(3rem, 2.3328rem + 1.39vw, 4rem);}
.pb30 { padding-bottom:2.5rem; padding-bottom: clamp(2.5rem, 2.1664rem + 0.69vw, 3rem);}
.pb20 { padding-bottom:1.5rem; padding-bottom: clamp(1.5rem, 1.1664rem + 0.69vw, 2rem);}
.pb15 {	padding-bottom: 15px;}
.pb10 {	padding-bottom: 10px;}
.pb5 { padding-bottom: 5px;}

.mb130 { margin-bottom:7.5rem; margin-bottom: clamp(7.5rem, 3.8336rem + 7.64vw, 13rem);}
.mb120 { margin-bottom:7rem; margin-bottom: clamp(7rem, 3.6672rem + 6.94vw, 12rem);}
.mb110 { margin-bottom:6.5rem; margin-bottom: clamp(6.5rem, 3.5008rem + 6.25vw, 11rem);}
.mb100 { margin-bottom:6rem; margin-bottom: clamp(6rem, 3.3328rem + 5.56vw, 10rem);}
.mb90 { margin-bottom:5.5rem; margin-bottom: clamp(5.5rem, 3.1664rem + 4.86vw, 9rem);}
.mb80 { margin-bottom:5rem; margin-bottom: clamp(5rem, 3rem + 4.17vw, 8rem);}
.mb70 { margin-bottom:4.5rem; margin-bottom: clamp(4.5rem, 2.8336rem + 3.47vw, 7rem);}
.mb60 { margin-bottom:4rem; margin-bottom: clamp(4rem, 2.6672rem + 2.78vw, 6rem);}
.mb50 { margin-bottom:3.5rem; margin-bottom: clamp(3.5rem, 2.5008rem + 2.08vw, 5rem);}
.mb40 { margin-bottom:3rem; margin-bottom: clamp(3rem, 2.3328rem + 1.39vw, 4rem);}
.mb30 { margin-bottom:2.5rem; margin-bottom: clamp(2.5rem, 2.1664rem + 0.69vw, 3rem);}
.mb20 { margin-bottom:1.5rem; margin-bottom: clamp(1.5rem, 1.1664rem + 0.69vw, 2rem);}
.mb15 { margin-bottom: 15px;}
.mb10 { margin-bottom: 10px;}
.mb5 { margin-bottom: 5px;}

/* font STYLE ------------------- */
.f-en { font-family: Arial, Helvetica, "sans-serif";}
.f-noto { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, "ＭＳ ゴシック",sans-serif;}
.f-jost { font-family: "Jost", sans-serif;}

/* font color --------------------------------------*/
.f-yel { color: #fabe00;}
.f-red { color: #eb4d18;}
.f-org { color: #ff8c00;}
.f-blu { color: #008bd3;}
.f-wht { color: #fff;}
.f-gry { color: #666; }

/* reset */
h4{
	text-align: left;
}
a.btn{
	color: #008bd3;
}

/* service canva CSS */
.sec-canva{
	container-type: inline-size;
    container-name: canva;
}

/* 共通 */
.sec-ttl{
	background-color: #f5f5f5;
	padding: 15px 20px;
    border-top: 3px solid #008bd3;
}
.sec-ttlsub {
    padding-left: 10px;
    border-left: 1px solid #999;
    margin-left: 10px;
}


/* intro */
.inrto-area{
	gap: 20px;
	align-items: center;
	max-width: 800px;
    margin: 0 auto;
}
.intro-txt{
	flex: 1;
}
.intro-img{
	width: 250px;
}

.sample-txt{
	max-width: 400px;
    margin: 0 auto;
}
.sample-catch{
	width: fit-content;
	margin: 0 auto;
}

.anchorlink-list{
	gap: 20px;
	background-color: #e6f4fb;
	padding: 30px;
    margin-left: auto;
	margin-right: auto;
}
.anchorlink-list>li{
    width: calc(33.3333% - 13.3333px);
}
.anchorlink-list .anchorlink{
	display: block;
	text-align: center;
    padding: 20px 10px 20px 0;
	background-color: #fff;
    border: 2px solid #008bd3;
    border-radius: 10px;
	position: relative;
	color: #008bd3;
}

.anchorlink-list .anchorlink::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: solid 2px #008bd3;
    border-right: solid 2px #008bd3;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-70%) rotate(135deg);
    transition: all ease 0.28s;
}

@media (min-width:768px){
	.anchorlink-list .anchorlink:hover::after {
		transform: translateY(-40%) rotate(135deg);
	}
}

@container canva (max-width: 650px) {
	.inrto-area{
		justify-content: center;
		border-bottom: 1px solid #ddd;
		margin-bottom: 50px;
	}
	.intro-txt{
		flex: auto;
	}

	.anchorlink-list {
		gap: 10px;
	}
	.anchorlink-list>li {
		width: 100%;
	}
	.anchorlink-list .anchorlink {
		padding: 10px 10px 10px 0;
	}
}

/* data */
.flow-list{
    counter-reset: dataflow-num;
}
.flow-item {
    counter-increment: dataflow-num;
}

.ttl-flowitem{
	line-height: 1.3;
	background-color: #c2e6f7;
	padding: 10px 10px 10px 45px;
	margin-bottom: 20px;
	position: relative;
}
.ttl-flowitem:before {
    content: counter(dataflow-num, decimal);
    font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #fff;
    background-color: #008bd3;
    position: absolute;
    left: 0;
    top: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    height: 100%;
}

.appdownload{
	gap: 15px;
}

.appdownload img {
	width: auto;
	height: 60px;
}
.applestore .appdownload img {
	aspect-ratio: 41/15;
}
.googleplay .appdownload img {
	aspect-ratio: 101/30;
}

.template-list{
	gap: 20px;
}
.template-list>li{
	width: calc(25% - 15px);
}

.template-list-img{
	background-color: #e6f4fb;
}
.template-list-txt {
	background-color: #008bd3;
	text-align: center;
	padding: 5px 0;
}

.btnarea{
	flex-wrap: nowrap;
	border: 1px solid #008bd3;
	border-radius: 10px;
	position: relative;
}
.btnarea::before{
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	background-color: #008bd3;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
.btnarea .btn{
	width: 50%;
	padding: 10px;
	text-align: center;
}

.left-cont{
	flex: 1;
}
.right-cont{
	width: 40%;
    min-width: 280px;
	height: fit-content;
	border-radius: 5px;
	border: 1px solid #ddd;
	overflow: hidden;
}
.right-cont>a{
	display: block;
	position: relative;
}
.right-cont>a::before {
    content: "+";
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 5px 0 5px 0;
    color: #fff;
    background-color: rgb(0 0 0 / 0.5);
    text-align: center;
    font-size: 40px;
    line-height: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.flow-cont{
	gap: 20px;
}

.flow_step-list{
	padding: 20px 0;
	border: 3px solid #f5f5f5;
	counter-reset: datastep-num;
}
.flow_step-item{
    counter-increment: datastep-num;
	padding-bottom: 50px;
}
.flow_step-item:last-of-type{
	padding-bottom: 0;
}

.flow_step-cont {
    padding-right: 20px;
}

.flow_step-cont .right-cont{
	min-width: 250px;
	border-radius: 0 5px 5px 5px;
}

.ttl-stepitem{
	line-height: 1.3;
	background-color: #f5f5f5;
	padding: 10px 10px 10px 45px;
	position: relative;
}
.ttl-stepitem.no-counter{
	padding: 10px 0 10px 20px;
}
.ttl-stepitem .stepnum-area{
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
}
.ttl-stepitem .stepnum-inner{
	display: block;
    width: 25px;
    height: 25px;
	position: relative;
}
.ttl-stepitem .stepnum-inner::before{
	display: block;
    content: counter(datastep-num, decimal);
	font-size: 16px;
	position: absolute;
    top: calc(50% + 1px);
    left: 50%;
    transform: translate(-50%, -50%);
}
.ttl-stepitem .stepnum-inner::after{
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    border: 1px solid #2887DE;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.stepitem-txt{
	padding: 15px 20px;
}

.notice-area{
	background-color: rgb(250 190 0 / 0.2);
    padding: 15px 20px;
    border-radius: 5px;
}

.flow_step-item .notice-area{
	margin: 20px;
}

.notice-list>li {
    padding-left: 1em;
    text-indent: -1em;
	margin-bottom: 10px;
    line-height: 1.6;
}
.notice-list>li:last-of-type{
	margin-bottom: 0;
}
.notice-list>li::before {
    content: "※";
    color: #eb4d18;
}

.ttl-flow-precaution{
	line-height: 1.3;
	padding: 8px;
	background-color: #008bd3;
	text-align: center;
	margin-bottom: 10px;
}

.flow-precaution-item>dt{
	padding: 5px 0 5px 1.5em;
    font-weight: bold;
	background-color: #f5f5f5;
    margin-bottom: 15px;
	position: relative;
}
.flow-precaution-item>dt::before {
    position: absolute;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    background-color: #2887DE;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.flow-precaution-item .right-cont {
    width: 50%;
    min-width: 280px;
}

.i-lock {
    position: relative;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}
.i-lock::before {
    content: url(../../img/guide/icon-canva_lock.svg);
    position: absolute;
    width: 100%;
    height: 100%;
    top: -3px;
    left: -1px;
}

.item-list{
	gap: 30px;
}
.item-list>li{
	width: calc(33.3333% - 20px);
}
.item-list .item-img{
	padding: 10px;
	border: 1px solid #ddd;
}
.item-list .item-name{
	text-align: center;
	padding-top: 10px;
}

.lb-outerContainer{
	width: fit-content !important;
	height: fit-content !important;
}
.flow-cont-img{
	gap: 10px;
}

@media (min-width:768px){
	.btnarea{
		overflow: hidden;
	}
	.btnarea .btn{
		transition: all 0.3s ease;
	}
	.btnarea .btn:hover {
		background-color: #e6f4fb;
	}

    .item-list>li a {
        transition: all 0.3s ease;
    }
	.item-list>li a:hover {
        opacity: 0.6;
    }
}

@container canva (max-width: 650px) {
	.left-cont {
		flex: auto;
	}
	.right-cont {
		margin: 0 auto;
		width: 100%;
		max-width: 420px;
		min-width: auto;
	}

	.flow_step-cont {
		padding-right: 0;
	}
	.flow_step-cont .right-cont {
		width: 90%;
		max-width: 400px;
		min-width: auto;
		border-radius: 5px;
	}

	.flow-precaution-item .right-cont {
		width: 100%;
		max-width: 400px;
		min-width: auto;
	}
}

@container canva (max-width: 600px) {
	.template-list{
		max-width: 350px;
		margin: 0 auto;
	}
	.template-list>li {
		width: calc(50% - 10px);
	}

	.item-list {
		gap: 20px 10px;
	}
	.item-list>li {
		width: calc(33.3333% - 6.6666px);
	}
}

@container canva (max-width: 500px) {
	.sec-ttlsub {
		display: block;
		padding-left: 0;
		padding-top: 5px;
		border-left: none;
		border-top: 1px solid #999;
		margin-left: 0;
		margin-top: 5px;
	}
	
	.stepitem-txt {
		padding: 15px 10px;
	}

	.notice-area {
		padding: 15px;
	}
	.flow_step-item .notice-area {
		margin: 20px 10px;
	}

	.item-list>li {
		width: calc(50% - 5px);
	}
}

@container canva (max-width: 440px) {
	.appdownload{
		justify-content: center;
	}
}