@charset "utf-8";
/* CSS Document */

body{color:#465157;background:#fff;-webkit-font-feature-settings:"palt";font-feature-settings:"palt";font-family: 'Noto Sans Japanese', Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 'Noto Sans Japanese', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic","Kosugi", sans-serif;margin: 0;padding: 0;}
@media screen and (min-width:768px){body{font-size:1.8rem;line-height:1.88889;margin: 0;padding: 0;}}
@media screen and (max-width:767px){body{font-size:1.6rem;line-height:1.6875;margin: 0;padding: 0;}}#document{overflow:hidden;margin:0 auto}
@media screen and (min-width:768px){a[href*="tel:"]{cursor:text;text-decoration:none;pointer-events:none}a[href*="tel:"] img{cursor:default}}
@media screen and (min-width:768px){p{margin-bottom:2em}}
#content_main{width: 1180px;margin: 0 auto;}
a:link{text-decoration: none;}
img {vertical-align: bottom;}
sup {font-weight: normal;}

/* CSS Document */

/* ----------------------------------------------------------------------------
 * デバイス識別
 * ------------------------------------------------------------------------- */
@media (max-width: 784px) {
  .pc_only {
    display: none !important; }
  #content_main{width: 100%;}
  .cnt{padding: 0 3%;}
	body{margin: 0;padding: 0;}
}
@media (min-width: 785px) {
  .sp_only {
    display: none !important; }
  img{-webkit-backface-visibility: hidden;}
}

/* ----------------------------------------------------------------------------
 * margin
 * ------------------------------------------------------------------------- */

.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}


/* ----------------------------------------------------------------------------
 * header
 * ------------------------------------------------------------------------- */

header{width: 100%;text-align: center;padding: 15px 0;}
header img{width: 180px;margin: 0;padding: 0;}

@media (max-width: 784px) {
	header{padding: 15px 0;}
	header img{width: 50%;}
}

/* ----------------------------------------------------------------------------
 * MV
 * ------------------------------------------------------------------------- */

.mv{width: 100%;margin: 0 auto;}
.mv img{width: 100%;}
.item_txt{width: 100%;color: #fff;font-size: 30px;background: #ee7898;padding: 20px 0;text-align: center;font-weight:bold;line-height: 1.4em;}
.role{text-align: center;margin-top: 40px;}
.role p{font-size: 30px;font-weight: bold;position: relative;margin: 0;}
.role p:after{    
	position: absolute;
	top: 60px;
    left: 50%;
    width: 180pt;
    height: 4px;
    background-color: #f8caca;
    content: '';
    transform: translateX(-50%);
}
.min{font-size: 70%;padding: 0 3px;}

.role_list{display: flex;flex-flow: wrap;list-style: none;padding: 0;justify-content: center;margin: 30px 0;}
.role_list li{padding: 3px 20px;background: #f8cbc9;border-radius: 8px;margin: 7px;font-weight: 500;}

.txt{font-size: 20px;text-align: center;margin: 70px 100px 0;}
.pink{color: #ee7898;font-weight: bold;}
.blue{color: #1c68a9;font-weight: bold;}
.attention{font-size: 40%;text-align: center;margin: 15px 0 50px;}

@media (max-width: 784px) {
	.role{margin-top: 5px;}
	.role p{font-size: 30px;}
	.role p:after{top: 100%;width: 50%;height: 4px;}
	.role_list{justify-content: space-between;margin: 15px 0;}
	.role_list li{font-size: 0.9rem; margin: 3px;flex-grow: 2;padding: 3px 0;}
	.txt{font-size: 1rem;text-align:left;margin:30px 0 10px;}
	.attention{font-size: 0.6rem;margin: 20px 0;}
}

/* ----------------------------------------------------------------------------
 * item
 * ------------------------------------------------------------------------- */

.item_wrap{background: #ebeffa;padding: 100px 0;}
.item{width: 900px;margin: 0 auto;padding: 60px 40px;background: #fff;box-shadow: 3px 7px 10px -5px #cccccc;}
.item_list{display: flex;align-items: center;}
.item_img{width: 350px;text-align: center;}
.item01{width: 130px;}
.item02{width: 350px;}
.item_detail{width: 480px;}
.item_name{font-size:28px;font-weight: bold;line-height: 1.6em;margin:0 0 10px;}
.item_name .min{font-weight: normal;font-size: 70%;}
.price{color:#ee7898;font-weight: bold;margin: 30px 0;}
.price .price_num{font-size:36px;}
.button{background: #0069b7;color: #fff;text-align: center;padding: 10px 0;border-radius: 8px;font-size:28px;font-weight: bold;position: relative;display: block;border:0px;width: 100%;}
.button:hover{opacity: 0.5;transition: 0.4s;}
hr{width: 90%;margin: 30px auto;border-top: 1px dashed #ccc;}
.free_shipping{color:#ee7898;border: 3px solid #ee7898;border-radius: 50px;font-size: 18px;padding:3px 20px;line-height: 3em;}

.button::before,
.button::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.btn_arrow::before{
    left: 350px;
    width: 8px;
    height: 8px;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media (max-width: 784px) {
	.item_wrap{width: 100%; background: #fff;padding:0;}
	.item{width:100%;padding: 10px 0;box-shadow:0 0 0 0 #fff;text-align: center;}
	.item_list{flex-flow: wrap;margin: 30px auto 10px;}
	.item_img{width: 350px;text-align: center;margin: 0 auto;}
	.item01{width: 40%;}
	.item_detail{width: 100%;margin-top: 20px;}
	.item_name{font-size: 1.2rem;}
	.price{margin: 15px 0;}
	.price .price_num{font-size:1.4rem;}
  .button{padding: 10px 0;border-radius: 8px;font-size:1.2rem;}
	.free_shipping{font-size: 1.2rem;padding:3px 20px;line-height: 3em;}
	.btn_arrow::before{left: 90%;}
}

/* ----------------------------------------------------------------------------
 * content01
 * ------------------------------------------------------------------------- */
.content_list{width: 1180px;display: flex;justify-content: space-between;flex-flow: wrap;margin: 0 auto}
.content_img{width: 570px;}
.content_img img{width: 100%;}
.content_detail{width: 590px;}
.content_wrap .content_list .content_txt{font-size: 20px;text-align: left;font-weight: normal;}
.content_point{width: 500px;margin: 20px auto;display: flex;justify-content: space-between;flex-flow: wrap;list-style: none;padding: 0;}
.content_point li{width:calc(50% - 10px);background: #006ab8;color: #fff;font-weight: bold;border-radius: 50px;text-align: center;font-size: 18px;padding: 5px 0;margin-bottom: 20px;}
.content_point .attention{font-size: 40%; margin: 20px auto 0;}
.content_point02{width: 100%;text-align: center;}
.content_point02 .main_txt{font-size: 24px;margin: 0;font-weight: bold;}
.content_point02 .sub_txt{font-size: 18px;margin: 5px 0;line-height: 1.4em;}
.content_point02 img{width: 315px;}

@media (max-width: 784px) {
.content_list{width: 100%;}
.content_img{width: 100%;}
.content_detail{width: 100%;}
.content_wrap .content_list .content_txt{font-size: 1rem;}
.content_point{width: 100%;margin: 10px auto;}
.content_point li{flex-grow: 2;font-size:0.9rem;padding: 10px 0;margin: 5px;}
.content_point .attention{font-size: 0.6rem;margin: 10px auto;}
.content_point{display:flex;flex-direction: column;flex-flow: wrap;}
.content_point02 img{width: 100%;order: 1}
.content_point02 .main_txt{width: 100%;order:2}
.content_point02 .sub_txt{width: 100%;order: 3}
}
	

/* ----------------------------------------------------------------------------
 * content02
 * ------------------------------------------------------------------------- */

.pic_wrap_txt{width: 100%;text-align: center;font-size: 20px;line-height: 1.4em;margin-bottom: 20px;}
.pic_wrap{width: 100%;display: flex;justify-content: space-between;flex-flow: wrap;padding: 0;}
.pic_list{width:50%;text-align: center;margin-bottom: 20px;}
.pic_img{width: 150px;margin: 0 auto;}
.pic_img img{width: 100%;} 
.ttl-pic{font-size: 20px;font-weight: bold;}
.pic_list p{font-size: 16px;margin: 0;line-height: 1.6em;}
.pic_wrap .attention{text-align:left;}

@media (max-width: 784px) {
	.pic_wrap_txt{font-size: 1rem;}
.pic_wrap{width: 100%;display: flex;justify-content: space-between;flex-flow: wrap;padding: 0;}
	.pic_list{width:calc(49% - 3px);}
.pic_img{width: 90%;}
.ttl-pic{font-size: 1.2rem;}
.pic_list p{font-size:0.8rem;text-align: left;}
.pic_wrap .attention{text-align:center;}
}

/* ----------------------------------------------------------------------------
 * content03
 * ------------------------------------------------------------------------- */

.content_wrap{width: 1180px;margin: 80px auto;}

.content_wrap .ttl {
    text-align: center;
    background: #006ab8;
    color: #FFF;
    padding: 10px;
    position: relative;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px
}

.content_wrap .ttl::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 0 40px;
    border-color: transparent transparent transparent #f9cbcb;
    position: absolute;
    left: 0;
    bottom: 0;
}

.content_wrap .content_txt{text-align: center;font-size: 24px;font-weight: bold;margin-bottom: 30px;}
.content_wrap .content_txt span .ul_pink{background: linear-gradient(transparent 60%, #f1a8bb 60%);}
.lcs-use {display: flex;justify-content: center;flex-flow: wrap;list-style: none;}
.lcs-use li {width: calc(22% - 10px * 3 / 4);margin: 0 15px 30px 0;text-align: center;}
.lcs-use li img{width: 100%;}
.lcs-use li .ttl-step {margin: 5px 0;font-size:20px;font-weight: bold;line-height: 1.2em;margin: 0 0 5px;}
.lcs-use li p {text-align: left;font-size:16px;margin: 0;}
.content_wrap .attention{text-align: right;}


@media (max-width: 784px) {
	.content_wrap{width: 100%;margin: 40px auto;}
	.content_wrap .ttl {font-size:1.5rem;}
	.content_wrap .ttl::after {border-width: 60px 0 0 60px;}
	.content_wrap .content_txt{font-size:1rem;}
	.lcs-use{flex-flow: column;margin: 0 auto;padding: 0;}
	.lcs-use li {width: 100%;margin: 0 0 40px 0;text-align: center;}
	.lcs-use li img{width: 60%;}
	.lcs-use li p {text-align: center;}
	.content_wrap .attention{text-align: center;}
}


.bnr{margin: 80px auto;text-align: center;}
.c-video {
    width: 800px;
    height: 450px;
    margin: 100px auto;
}
.c-video iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 784px) {
	.bnr{width: 100%; margin: 40px auto;}
	.bnr img{width: 100%;}
	.c-video {width: 100%;height: 56vw;margin: 60px auto;}
}


/* ----------------------------------------------------------------------------
 * footer
 * ------------------------------------------------------------------------- */

footer {background: #f1f1f1;padding: 50px 0;margin-top: 50px;}
footer ul{width: 900px; display: flex;justify-content: space-around;margin: 0 auto;list-style: none;}
footer li{padding-left: 15px; color: #525252;font-size: 20px;position: relative;}
.copy{margin: 30px 0 0; font-size: 16px;text-align: center;}
footer li a{color: #525252;}
footer li a:hover{color: #ddd;}

footer li::before,
footer li::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.fot_arrow::before{
    left: 0px;
    width: 4px;
    height: 4px;
    border-top: 2px solid #525252;
    border-right: 2px solid #525252;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media (max-width: 784px) {
	footer {background: #f1f1f1;padding: 50px 0;margin-top: 50px;}
footer ul{width: 75%; flex-flow: wrap;}
footer li{padding-left: 15px;font-size:1rem;flex-grow: 2;margin-bottom: 5px;}
.copy{margin: 30px 0 0; font-size: 0.9rem;}
	
}
/*------------------------------------------------------------
list
------------------------------------------------------------*/
/*
------------------------------------------------------------*/
.c-list1 {
  width: 820px;
  margin: 0 auto;
  padding-left: 44px; }
  @media screen and (max-width: 767px) {
    .c-list1 {
      width: 100%;
      padding: 0; } }
  .c-list1__ttl {
    font-size: 1.2rem;
    line-height: 2;
    color: #666; }
    @media screen and (max-width: 767px) {
      .c-list1__ttl {
        font-size: 50%; } }
  .c-list1__info {
    padding-left: 5px; }
  .c-list1__item {
    font-size: 40%;
    line-height: 2;
    color: #666;
    position: relative;
    padding-left: 7px; }
    @media screen and (max-width: 767px) {
      .c-list1__item {
        font-size: 0.8rem;
        line-height: 1.6;
        margin: 0 0 5px; } }