@charset "utf-8";

/*:root {
	--width-pc: 980px;
	--width-sp: 375px;

	--main-theme-color:    #f6aebe;
	--sub-theme-color:     #f3d8ee;
	--sub-theme-color-txt: #80745c;
	--main-theme-color-bg: #decdee;
}*/

ul.breadcrumbs {
	display: flex;
	padding: 10px 2%;
	margin: 0;
}
ul.breadcrumbs > li {
	display: block;
	font-size: var(--compact-font-size);
}
ul.breadcrumbs > li + li {
	margin-left: 3px;
}
ul.breadcrumbs > li + li::before {
	content: "＞";
	margin-right: 3px;
}
a:hover,
a:link,
a:visited {
	color: #000000;
}

main section .button-others {
	width: 180px;
	margin: 0 auto 10px;
}
main section .button-others a {
	position: relative;
	display: block;
	padding: 5px;
	background: #333333;
	border: 1px solid #333333;
	color: #ffffff;
	text-align: center;
}
main section .button-others a:hover {
	background: #ffffff;
	color: #333333;
	text-decoration: none;
}
main section .button-others a i.fas {
	position: absolute;
	top: calc(50% - 8px);
	right: 3%;
}


h2,h3{
    padding: 0 ;
    margin: 0;
    text-align: center;
}

main .button-primary,
main .button-secondary {
    width: 240px;
    margin: 6% auto;
}
main .button-primary a {
    position: relative;
    display: block;
    padding: 10px;
    background: #f33137;
    border: 1px solid #f33137;
    color: #ffffff;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}
main .button-primary a:hover {
    background: #ffffff;
    color: var(--theme-important-color);
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
    }
/*------------------------------------*/

.bg-yel{
   background-color: #fffa99;
   font-weight: bold;
    }
h1{
	margin: 0;
}
/*
main section.key-visual {
	background-image: url(../images/kv_pc.jpg);
}
*/

#tfm{
    background-color: #eaeef6;
    background-image: url(../images/bg_1.jpg);
    background-repeat: repeat;
    font-size: 14px;
}
#basic-price,#option-price{
        height: 80px;
    }
.key-visual-h1 img{
    width: 100%;
    height: auto;
}
    .pc-only{
        display: none;
        }
.jump{
    margin: 0 auto;
    height: auto;
    background-color: #136c94;
    width: 100%;
    top: 40px;
    display: flex;
    z-index: 100;
    position: sticky;
}

.jump ul{
    overflow: hidden;
    padding-left: 0;
    width: 100%;
    margin: 0 auto;
}


.jump li{
    width: 25%;
    float: left;
    border-right: 1px solid #aaa;
    text-align: center;
    list-style: none;
    font-size: 0.7rem;
    font-weight: bold;
}

.jump a{
    color: #fff;
    display: inline-block;
    padding: 6%;
}
.jump_point{
        height: 20px;
    }

.li_jump_last{
      border-right:none !important;  
}

#jump-pack,#jump-period,#jump-stores{
    height: 70px;
}

.merit{
    width: 90%;
    margin: 0 auto;
}
.merit-h2 h2{
    font-size: 1.2rem;
    /*border: 1px solid #fff;*/
    padding: 3% 0%;
}
.text-left{
    text-align: left;
}
.merit-h2{
    background-color: #136c94;
    text-align: center;
    padding: 4%;
    color: #fff;
    background-image: url(../images/headline_bg.png);
}
.merit-p{
    margin: 6% auto;
}
.merit-p img{
    width: 100%;
    height: auto;
}
.merit-wrap{
    width: 100% ;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.img-wrap{
    text-align: center;
    margin: 0;
}
.img-wrap img {
    width: auto;
    height: 300px;
    padding: 2%;
}
.text-wrap{
    background-color: #fff;
    padding: 2%;
}
.merit-item{
    padding: 1% 0 2%;
}

.merit-h3{
    color: #ff0808;
    padding: 1% 1% 1% 2%;
}
#tfm .fas{
    margin-right: 2%;
}
#tfm .fas2{
    margin-left: 4%;
}
.sub-text{
    padding: 1% 4% 1% 8%;
}
.basic-plan{
    width: 90%;
    margin: 8% auto;
}
.basic-h2 img {
    width: 100%;
    height: auto;
}
.price-btn{
    /*position: relative;
    top: -30px;*/
}

.cycle{
    background-color: #fff;
    padding: 6% 2%;
    text-align: center;
}
.cycle-h2 ,.h2-qa{
    margin: 2% auto 8%;
}
.cycle-h3{
    text-align: center;
    margin: 3% auto;
}
.cycle-h3 img{
    width: 90%;
    height: auto;
}
.cycle-wrap{
    width: 90%;
    height: auto;
    margin: 0 auto;
}
.balloon-001 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin-bottom: 15px;
    padding: 0.4em 0.8em;
    border-radius: 5px;
    background-color: #17a7ce;
    color: #ffffff;
    margin: 0 auto;
}

.balloon-001::before {
    position: absolute;
    bottom: -14px;
    width: 30px;
    height: 15px;
    background-color: #17a7ce;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}
.sycle-head{
    display: flex;
    flex-direction: row;

}
.cycle-1,.cycle-2{
    padding: 2%;
    background-color: #036cb6;
    color: #fff;
    font-weight: bold;
    width: 46%;
    margin: 2% 1% 2% 3%;
    text-align: center;
}

.cycle-2{
    background-color: #12944d;
    margin: 2% 3% 2% 1%;
    
}
.option{

}
.option-text{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.option-wrap{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.option-table{
    margin:0px;
    padding:0px;
    text-align: center;
}
.option-table table{
    width: 100%;
    border-collapse: collapse;
    border:1px solid #808080;
    background-color:#808080;
    text-align:left;
    color:#fff;
}
.option-table td{
     border:1px solid #808080;
     text-align:center;
     padding: 3%;
}

.td-option-price{
    border:1px solid #808080;
    text-align:center;
    color:#ff0000;
    background-color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
}
.sticker {
    width: 30%;
    height: auto;
    position: relative;
    top: -30px;
    left: -40px;
    display: inline-block;
}

.sticker img{
    width: 100%;
    height: auto;
}
.option_item{
    background-color: #fff;
    padding: 5% 3% 6%; 
    width: 86%;
    margin: 0% auto 6%;
}
.option_item_maintext {
    background-color: #17a7ce;
    color: #fff;
    margin: -30% 0 3%;
    padding: 3%;
}
.option_item_maintext-2{
    margin:  0 0 3%;
}
.option_item_img{

}
.option_item_img img{
    width:100% ;
    height: auto;
}

.option_item_subtext {
    padding: 0 4%;
    letter-spacing: unset;
    font-size: 0.9rem;
}
.price{
    background-color: #AFD3E2;
    padding-bottom: 8%;
}
.price-sub{
    text-align: center;
    margin: 0 auto 4%;
}

.app{
    text-align: center;
}
.app a{
    display: inline-block;
    margin: 0 1%;

}
.app-img {
    width: 100%;
    height: auto;
}
.price-wrap {
    padding: 5%;
    background-image: url(../images/bg_top.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
}
.price_table{
    width :98%;
    border-collapse: collapse;
    border:1px solid #000;
    background-color:#FFFFFF;
    color:#000000;
    margin: 0 auto;
}

tbody{
    text-align:center;

}
.price-h2{
    background-image: url(../images/headline_bg.png);
    padding: 4% 6%;
    color: #fff;
}
.price-h3 {
    /* border-top: 1px solid #fff; */
    /* border-bottom: 1px solid #fff; */
    color: #fff;
    padding: 2%;
    margin: 8% 1% 4%;
    /* text-shadow: 1px 1px 4px #0e3749; */
    background-color: #156b93;
}
.price_td_inch{
    border:1px solid #000;
    background-color: #eee;
    width: 30%;
}

.price_th{
    border:1px solid #000;
    background-color: #eee;
    color:#000000;
}
.t-red{
    color: red;
}

.price_td_price{
    border:1px solid #000;
    color: red;
    font-weight: bold;
    padding: 1.5%;
    width: 35%;
    font-size: 1rem;
}
.tanpin{
    border: 1px solid #000;
    padding: 4%;
    text-align: center;
    margin: 2% 1%;
    background-color: #cbe5f0;

}
/*-----アコーディオンQA-----*/
.h2-qa {
    background-color: #4b4b4b;
    padding: 3%;
    margin: 0 4%;
    color: #ffffff;
    /* border: 1px solid #FFF; */
} 
.qa {
    font-size: 0.7rem;
    padding-top: 0;
    margin: 0 auto;
    background-color: #AFD3E2;
    padding: 0 2% 8%;
    background-image: url(../images/bg_btm.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}
.panel2 {
    /*border: 2px solid #17a7ce; */
    background-color: #fff;
    margin-top: 0;
    margin-bottom: 10%;
    padding: 4%;
    margin: 0 4% 4% 4%;
}
.panel2 > dt {
	color: #000000;
    cursor: pointer;
	padding: 8px 6px;
    font-weight: bold;
    font-size: 1.2em;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    border-radius: 0;
    width: 94%;
    background: #fff;
    margin: 0 auto;
}
 
.panel2 > dd {
    margin: 0px;
    padding: 2% 6%;
    font-size: 0.8rem;
}

.panel2 > dt > p {
    text-align: left;
    display: inline-block;
    width: 94%;
    margin: 0;
}
.panel2 > dt > span {
    text-align: right;
    display: inline-block;
    width: 6%;
}
.qa-img{
    text-align: center;
}
.qa-img img{
    width: 70%;
    height: auto;
}
/*-----アコーディオン2おわり-----*/ 



/*start of store*/
main section.stores .description {
    font-size: 16px;
    line-height: 1.4;
    margin: 20px 5px 40px 10px;
    text-align: center;
}
main section.stores ul {
    width: 375px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 20px;
    padding: 0;
}
main section.stores ul li.store {
    width: 182px;
    display: inline-block;
    margin: 0 2px 8px;
}
main section.stores ul li.store .photo {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
}
main section.stores ul li.store .photo img {
    width: 100%;
    height: auto;
    vertical-align: top;
    line-height: 0;
}
main section.stores ul li.store .photo figcaption {
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    padding: 3px;
    background: rgb(0,0,0,0.5);
}
main section.stores ul li.store .photo figcaption h3 {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}
main section.stores ul li.store .tel {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 5px 0;
}
main section.stores ul li.store .address {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 5px 0;
}
main section.stores ul li.store .access-map a {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 5px 2px;
    text-align: center;
    color: #cc0235;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #cc0235;
    box-sizing: border-box;
    background: #ffffff;
}
main section.stores ul li.store .access-map a:hover {
    color: #ffffff;
    background: #cc0235;
    text-decoration: none;
}

/*end of store*/

    .acsess{
        margin: 6% 5%;
    }
    .description{
        margin: 5%;
        font-size: 0.9rem;
    }

.catch_copy, .description{
    margin: 4% !important;
}
.storeblogs-wrap {
background: #fff;
}
.storeblogs {
    width: 360px;
    margin: 60px auto 0;
    padding: 0 0 4%;
}
.storeblogs .catch_copy {
    font-size: 15px;
    margin-bottom: 25px;
    text-align: center;
}
.storeblogs .similar-articles {
    font-size: 14px;
    color: #000000;
    width: 100%;
    margin: 0 auto 15px;
}
.storeblogs .similar-articles { position: relative; border: 1px solid #000; padding: 20px; box-sizing: border-box; }
.storeblogs .similar-articles a { display: flex; flex-wrap: wrap; justify-content: space-around; text-decoration: none; }
.storeblogs .similar-articles .label { position: absolute; top: -6px; left: -6px; background: #000000; padding: 3px 5px; color: #ffffff; font-size: var(--compact-blogs-font-size); }
.storeblogs .similar-articles .photo { width: 316px; }
.storeblogs .similar-articles .photo img { width: 100%; height: auto; }
.storeblogs .similar-articles a:hover { opacity: 0.8; }
.storeblogs .similar-articles .detail { width: 316px; position: absolute; bottom: 20px; background: rgb(0,0,0,0.5); }
.storeblogs .similar-articles .detail .title { position: relative; color: #ffffff; font-weight: var(--base-blogs-font-weight); margin-top: 10px; padding: 0 10px 7px; }
/*
.storeblogs .similar-articles .detail .title::after { content: ''; width: 16px; height:1px; background: #ffffff; position: absolute; bottom: 10px; right: 3px; transform: rotate(45deg); }
.storeblogs .similar-articles .detail .title::before { content: ''; width: 36px; height:1px; background: #ffffff; position: absolute; bottom: 5px; right: 6px; }
*/
.storeblogs .similar-articles .detail .title::after {
    content: '';
    border-top: 7px solid transparent;
    border-right: 7px solid #ffffff;
    border-bottom: 7px solid #ffffff;
    border-left: 7px solid transparent;
    position: absolute;
    bottom: 3px;
    right: 3px;
}
.storeblogs .similar-articles .detail .title::before {
    content: '';
    width: 14px;
    height:1px;
    background: #ffffff;
    position: absolute;
    bottom: 12px;
    right: 5px;
    transform: rotate(-45deg);
}
.storeblogs .similar-articles .detail .title span { display: inline-block; }
.storeblogs .similar-articles .detail .description { display: none; font-size: var(--compact-blogs-font-size); margin: 12px 0 0; color: #888888; }
.storeblogs .similar-articles .detail .con-button { width: 170px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); background: #fff; border: 1px solid #000; padding: 5px 10px!important; box-sizing: border-box; text-align: center;  }
.storeblogs .similar-articles .detail .con-button.blog-link { display: none; }



/*-- タブレット／PC用スタイリング --*/
/*@media screen and (min-width:768px) and (max-width:959px) {*/
@media screen and (min-width:768px) {
	section.key-visual{
		width: 100%;
	}
    .jump {
        padding: 0% 0% 3%;
        top: 65px;
    }


    .jump ul ,.special-offer-wrap , .price-wrap,.step-wrap {        
        width: 960px;

    }
    .jump li{
        font-size: 1rem;
    }
    .jump_point{
        height: 40px;
    }
    #jump-pack, #jump-period, #jump-stores {
        height: 120px;
    }
    .merit,.cycle-wrap,.basic-plan,.basic-plan,.optional-plan,.pa-wrap,.stores-wrap{
        max-width: 960px;
        margin: 0 auto;
    }
    .price-wrap{
        max-width: 980px;
        margin: 0 auto;
    }
    .sub-text{
        padding: 1% 0% 1% 7%;
    }
    .merit-h2 h2{
        font-size: 2rem;
    }
    h2{
        font-size: 2rem;
        padding: 2%;
    }
    #basic-price,#option-price{
        height: 140px;
    }
    .merit-p {
        margin: 5% 5% 0%;
    }
    .merit-h2 {
        padding: 1%;
        background-size: cover;
    }
    .merit-h3 {
        font-size: 1.2rem;
    }
    .merit-wrap{
        flex-direction: row;
    }
    .text-wrap {
        margin: 4% 0 4% 0;
    }
    .img-wrap{
        margin: 4% 0 0 0;
    }
    .img-wrap img {
        width: 86%;
        height: auto;
    }
    .cycle-h2 {
        margin: 2% auto 4%;
    }
    .cycle-wrap {
        font-size: 1rem;
    }
    .cycle-h3 img {
        width: 60%;
    }
    .option-wrap{
        margin: 0 auto;
        width: 100%;
        flex-direction: row;
    }
    
    .option_item_maintext {
        margin: -36% 0 6%;
    }
    .option_item_maintext-2 {
        margin: 0 0 6%;
    }

    .option_item{
        width: 30%;
        padding: 2% 2% 3%;
    }
    .option-text {
        margin: 4% auto 4%;
        font-size: 1rem;
    }
    .option-table td {
        padding: 3% 1%;
    }
    .option_item_subtext {
        padding: 0;
    }
    .td-option-price {
        font-size: 1rem;
    }
    .sticker {
        width: 36%;
        top: -36px;
        left: -52px;
    }

    .price-sub{
        margin: 0 auto 2%;
        width: 100%;
        text-align: center;
        padding:0;
        font-size: 1.1rem;
    }

    .price-wrap {

        background-image: none;
    }
    .price_pc_bg{
        background-image: url(../images/bg_top.png);
        background-repeat: no-repeat;
        background-position: top;
        background-size: contain;
    }
    .price-h3-1 {
        margin: 3% 1% 4%;
    }
    .price-h2 {
        background-size: cover;
    }
    .price-btn-2 {
        margin: -5% auto;
    }
    .price_td_inch {
        font-size: 1.2rem;
    }
    .price_td_price {
        font-size: 1.5rem;
    }
    .h2-qa {
        padding: 1%;
        font-size: 1.2rem;
    }
    .panel2 > dt {
        font-size: 1.4em;
    }
    .panel2 > dd {
        font-size: 1rem;
    }

    main section.stores .description {
        margin-left: 0;
    }
    main section.stores ul {
        width: 960px;
    }
    main section.stores ul li.store {
        width: 228px;
        margin: 0 6px 10px;
    }


 .storeblogs {
        width: 680px;
        margin-bottom: 90px;
        padding: 0 0 4% 0;
    }
    .storeblogs .similar-articles { width: 680px;}
    .storeblogs .similar-articles .photo { display: block; }
    .storeblogs .similar-articles .detail { position: static; background: none; padding: 0 0 0 12px; }
    .storeblogs .similar-articles .detail .title { color: #000000; padding: 0 0 7px 0; border-bottom: 1px solid #000;font-weight: bold; }
    .storeblogs .similar-articles .detail .title::after,
    .storeblogs .similar-articles .detail .title::before { display: none; }
    .storeblogs .similar-articles .detail .description { display: block; margin: 12px 0 38px; }
    .storeblogs .similar-articles .detail .con-button { left: auto; right: 20px; transform: none; }
    .storeblogs .similar-articles .detail .con-button.blog-link { display: block; }
    .storeblogs .similar-articles a:visited .detail .title,
    .storeblogs .similar-articles a:link .detail .title,
    .storeblogs .similar-articles a:link .detail .con-button, 
    .storeblogs .similar-articles a:visited .detail .con-button { color: #000000; }
    .storeblogs .similar-articles a:hover .detail .con-button { background: #000000; color: #ffffff; }

}
@media screen and (min-width:960px) {
    .pc-only{
        display: block;
        }
 section .merit,.basic-plan{
    max-width: 980px;
    margin: 0 auto;
    }    
    .jump {
        padding: 0;     
    }
    .jump a {
        padding: 6% 20%; 
    }
     .app-img{

    }

}
@media screen and (min-width:1180px) {

}
@media screen and (min-width:1500px) {


}