@charset "UTF-8";

/* intro 
----------------------------------------------- */
.intro .ttl{line-height: 1.8;font-feature-settings: "palt";letter-spacing: .02em;text-align: justify;font-weight: bold;margin-bottom: 12vw;}
.intro .ttl .min{padding: 1% 0;background: #e39993;font-weight: bold;text-align: center;border-radius: 50px;color: #fff;display: block;width: 65vw;margin: 0 auto 2vw;font-size: 4vw;}
.intro .ttl .big{font-size: 4vw;}
.intro img.deco{margin: 4vw auto 0;}

.intro li{margin-bottom: 10vw;}
.intro li img{width: 90%;margin: 0 auto 6vw;}
.intro li p:last-child{margin-bottom: 0;}
.intro li p.read{font-size: 4vw;font-weight: bold;color: var(var(--pink));}
.intro li span{font-weight: bold;background: #fdf6d1;}

.features{padding: 6%;background: #fff;}
.features dl{margin-bottom: 5vw;padding-bottom: 5vw;border-bottom: 1px dotted #ccc;}
.features dt{font-weight: 600;margin-bottom: 2vw;}
.features dt span{height: 18px;width: 18px;border-radius: 50%;display: inline-block;text-align: center;background: #eee;color: #49382f;font-size: 80%;margin-right: 5px;font-family: 'quicksand';font-weight: 700; padding-top: 4px;padding-left: 0; text-indent: 0;line-height: 1;}
.features dd{line-height: 1.6;}
.features .ttl{text-align: center;font-weight: 600;color: #fff;background: #e39993;font-size: 120%;margin-bottom: 5vw;}
.features .comment{text-align: center;}
.features .comment a{display: inline;color: #e39993;font-weight: 600;text-decoration: underline;text-underline-offset:5px;}

.intro li .more01{width:80%;}

/* explain 
----------------------------------------------- */
.explain .white{padding: 5vw;background: #fff;border-radius: 12px;-moz-box-shadow: 0 0 12px rgb(242 170 163 / 30%);-webkit-box-shadow: 0 0 12px rgb(242 170 163 / 30%);box-shadow: 0 0 12px rgb(242 170 163 / 30%);margin-bottom: 6vw;}
.explain span{text-align: center;}
.explain img{width: 100%;margin-bottom: 4vw;}
.scroll{margin-bottom: 4vw;}
.scroll img{width: 660px;}

.explain p.read{font-size: 4vw;font-weight: bold;color: var(--red);margin-bottom: 1vw;}
.explain p span{font-weight: bold;background: #fcf1f0;}
.explain p.mb80{margin-bottom: 8vw;}






/* =============================================
pc
================================================*/
@media screen and (min-width: 736px) { 

/* intro 
----------------------------------------------- */
.intro .ttl{margin-bottom: 60px;text-align: center;}
.intro .ttl .min{padding: 6px 0;width:300px;margin: 0 auto 14px;font-size: 17px;}
.intro .ttl .big{font-size: 20px;text-align: center;}
.intro img.deco{margin: 40px auto 0;}

.intro li{margin-bottom: 100px;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}
.intro li img{width: 357px;margin: -30px -40px 0 40px;order: 2;}
.intro li p:last-child{margin-bottom: 0;}
.intro li p.read{font-size: 20px;}

.intro li:nth-of-type(2) img{order: 1;margin: -10px 40px 0 -40px;width: 380px;}
.intro li:nth-of-type(2) .text{order: 2;}
	
.intro li .more01{width:280px;margin: 0;}
	
.features{padding: 30px;}
.features dl{margin-bottom: 20px;padding-bottom: 20px;}
.features dt{margin-bottom: 10px;}
.features dt span{padding-top: 3px;}
.features .ttl{margin-bottom: 30px;}


/* explain 
----------------------------------------------- */
.explain .white{padding: 40px;margin-bottom: 40px;}
.explain img{width: 900px;margin-bottom: 30px;}
.scroll{margin-bottom: 0;}
.scroll img{width: 100%;}

.explain p.read{font-size: 20px;margin-bottom: 20px;}
.explain p.mb80{margin-bottom: 60px;}
}