/*
Theme Name: Welcart Basicの子テーマ：成績Ap[CRAM]
Description: Welcart Basicの子テーマです
Template: welcart_basic
*/

@charset "UTF-8";
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);



/*=================================================
初期設定
===========================*/
html{ margin:0; padding: 0;  }
body {height:100%; font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;}

body {background: url(images/bk.jpg) repeat; color: #333333; }
a[href^="tel:"] { cursor: default; }
ul{ padding: 0;  margin: 0 !important;}
ul li{ list-style: none; padding: 0; margin: 0; }
table{ width: 100%; }
strong{ color: #ff9800; }

img{ max-width: 100%; height: auto; }
table th , table td{ padding: 10px; border-bottom:#c8c8c8 2px solid; }

a{ color: #8fc322; text-decoration: underline; transition: .2s;}
a:hover { text-decoration: none;}
p{ font-size: 1rem; line-height: 1.5rem; }

hr{ margin : 4rem 0 !important; border-color:#ddd; border-width: 1px; }


h4{ line-height: 1.5 !important; }


.gmap {height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; }
.gmap iframe {position: absolute; left: 0; top: 0; height: 100%; width: 100%; }
.movie-wrap {position: relative; padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/ height: 0; overflow: hidden; }
.movie-wrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.d-table{ display: table; }
.d-table_cell{ display: table-cell; vertical-align: middle; }

/*Bootstrap上書き*/
.lead { line-height: 2rem;}

/* -------------------------------------
 *  共通CSS
 * -------------------------------------*/
.hover a , a img.hover{
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.hover a:hover , a img.hover:hover{
    opacity: 0.4;
    filter: alpha(opacity=60);
    text-decoration: none;
}
main .hover a:hover{ text-decoration: none;}

.bor_r{ border-radius: 5px; }
.unline{ border-bottom: #888 1px dotted;}
.att01 span{ /*border-top: #519dd2 1px solid;*/ border-bottom: #519dd2 1px solid; padding: 10px; margin: 10px; }
.att02 span{ background: #fff; border-radius: 5px; padding: 10px; margin: 10px; }

.red{ color: #d2343e/*#c0667a*/ !important;}
.yew{ color: #946700  !important; }
.green {color: #6AB950!important; }
.bl {color: #0072d0!important; }
.pink {color: #bf0000!important; }
.purple{color:#6f5ea2!important;}

.font08{ font-size: .8rem; line-height: 1.3rem; }
.font09{ font-size: .9rem; }
.font10{ font-size: 1rem; }
.font12{ font-size: 1.2rem; line-height: 1.8rem; }
.font14{ font-size: 1.4rem; line-height: 2.5rem; }
.font16{ font-size: 1.6rem; line-height: 2.5rem;}
.font18{ font-size: 1.8rem; line-height: 3rem;}
.font20{ font-size: 2rem; line-height: 3.2rem;}
.font25{ font-size: 2.5rem; line-height: 3.2rem;}
.font30{ font-size: 3rem; line-height: 4rem;}


.underline {background:linear-gradient(transparent 40%, #ffdc49 0); }
.underline_red {background:linear-gradient(transparent 70%, #f28f95 0%); }
.underline02 {
    background: linear-gradient(transparent 35%, #ffdc00 35%);
    font-weight: bold;
    border-radius: 6px;
}
.underline03{ border-bottom: #3c3c3c 2px solid ; padding-bottom: 10px; display: inline-block; }
.bg_border{ /*background-color: #ddd;*/ border: #74bd58 3px solid; display: inline-block; margin: 0 auto; box-sizing:border-box; }

.pt-5rem{ padding-top: 5rem; }
.list li{ list-style-type: disc; margin-left: 1.5rem; }
.apnavi_logo{ background: url(images/ser_nav.png) no-repeat 0 2px; background-size: 150px; padding-left: 155px; display: inline-block; }

.mb-10{ margin-bottom: 1rem; }
.mb-20{ margin-bottom: 2rem; }
.mt-20{ margin-top: 2rem; }
.mt-30{ margin-top: 3rem; }
.mt-50{ margin-top: 5rem; }
.mt-100{ margin-top: 10rem; }
.pt-50{ padding-top: 5rem; }
.pt-100{ padding-top: 10rem; }
.pb-20{ padding-bottom: 2rem; }
.mt--20{ margin-top: -2rem; }
.pb-50{ padding-bottom: 5rem; }

/*adobeフォント*/
.midashi{font-family: toppan-bunkyu-midashi-go-std,sans-serif; font-weight: 900; font-style: normal;}

/*背景画像*/
.top_bg{ background: url(images/top_bg.png) repeat-y top center; background-size: cover; }
.bg{ background: url(images/bg.gif) repeat center center;  background-size: 30px; }

@media (max-width: 575.98px) {
    .top_bg{background-size: contain; repeat-y; }
}

@media (min-width: 769px) {
    body.top_bg{ padding-top: 100px; }
}


/*=================================================
header + MV
===========================*/

i{ display: inline-block; padding-right: 15px; }

/*PC + TAB*/
#navarea { background-color: rgba(115, 115, 115, .5); width: 100%; position: fixed; top:0; z-index: 9999;}
#he_logo{ width: 100px; height: auto; padding: 1rem 0; }
#he_logo a:hover{ opacity: .5; }
#navarea #pc_nav a { text-decoration: none; width: 180px; display: inline-block; color: #fff; font-size: .9rem; font-weight: bold; text-align: center; line-height: 1.3rem; padding: 1rem 0; }
#navarea #pc_nav a span{ display: block; font-weight: normal;}

/*#navarea #pc_nav a:hover,
#navarea #pc_nav a.on{ background-color: rgb(80 157 177 / 60%);}*/

#navarea #pc_nav a#nav-service:hover,
#navarea #pc_nav a#nav-service.on{background-color: rgb(243 225 0 / 0.6);}


#navarea #pc_nav a#nav-flow:hover,
#navarea #pc_nav a#nav-flow.on{background-color: rgb(143 195 35 / 0.6);}

#navarea #pc_nav a#nav-termsofuse:hover,
#navarea #pc_nav a#nav-termsofuse.on{background-color: rgb(239 144 185 / 0.6);}

#navarea #pc_nav a#nav-faq:hover,
#navarea #pc_nav a#nav-faq.on{background-color: rgb(248 183 37 / 0.6);}



/*=================================================
TOP
===========================*/

body{ overflow: hidden; }

#feature .f_num{
    padding: 1rem;
    position: relative;
}
#feature .f_num span{
    display: block;
    font-weight: bold;
    font-size: 60px;
    color: rgba(0, 0, 0, 0);
    text-shadow: 2px 2px 0 #fff;
    -webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;

}
#feature .f_num{margin: 0 -15px; }
#feature .f_num:before{ position: absolute; top:0;}


#feature .f_f01{ font-size: 1.2rem; font-weight: bold; padding: 1rem; }
#feature .f_f02{ font-size: 2.2rem; font-weight: bold; padding: 1rem; }
#feature .f_f02 span{
    font-weight: bold;
    font-size: 70px;
    color: rgba(0, 0, 0, 0);

    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
    padding: 0 0 10px;
    display: inline-block;
}

#feature #feature1 .f_num{ background-color: #f3e100;}
#feature #feature1 .f_num:before{ content:url(images/arr_y.png);  left:0;}
#feature #feature1 .f_f02 span{ text-shadow: 2px 2px 0 #efd600;}

#feature #feature2 .f_num{ background-color: #8fc322;}
#feature #feature2 .f_num:before{ content:url(images/arr_g02.png); right:0; }
#feature #feature2 .f_f02 span{    text-shadow: 2px 2px 0 #8fc322;}

#feature #feature3 .f_num{ background-color: #ef90b9;}
#feature #feature3 .f_num:before{ content:url(images/arr_r.png); left:0; }
#feature #feature3 .f_f02{ padding-top: 3rem; padding-left: 0; line-height: 55px; }
#feature #feature3 .f_f02 span{ font-size: 50px; text-shadow: 2px 2px 0 #ef90b9;}


@media (min-width: 769px) {
    #feature #feature2 .col-md-6.img_area{ margin-left: -50px; padding-left: 0; }
    #feature #feature2 .col-md-6.img_area img{ width: 80%;}
    #feature #feature3 .col-md-6.img_area{ margin-top: -150px; }
}
@media (min-width: 576px)  {
    #feature .f_f01 span{ padding: 1rem;}
    #feature #feature1 .container-fluid.txt_area{ margin-top: -100px;}
}

@media (max-width: 768px) {
     #feature1{ padding-top: 2rem; }
 }

@media (max-width: 575.98px) {
     #feature .f_num{ width: 85%; }
     #feature .f_num span{ font-size: 35px; }
     #feature #feature2 .col-md-6.img_area img{ width: 70%;}
     #feature #feature3 .col-md-6.img_area{ margin-left: 0; padding-left: 0;}
     #feature #feature3 .col-md-6.img_area img{ width: 70%;}
}





/*=================================================
footer
===========================*/
#footer{ background-color: rgba(115, 115, 115, .5);  padding: 30px 0 ; margin-top: 0px; box-shadow: 0 -1px 3px #c3c3c3}
.footer_ttl { font-size: 1.7em; font-family: ten-mincho-text,serif; font-weight: 400; font-style: normal; margin-bottom: 0; color: #fff;}
.footer_ttl span{ font-size: 1.4rem; }
#footer ul li{ margin: 6px 0; }
#footer ul li.second{ margin-left: 6px; }
#footer .footer_nav a{ color: #fff; font-weight: bold; text-decoration: none; }
#footer .footer_nav a:hover{ text-decoration: underline; }
#footer .footer_nav a svg{ margin-right: .5rem; }

#footer_nav_member{ border: 1px solid #000; background: #fff; }
#footer_nav_member .membership{ color: #000; }
#footer_nav_member .membership svg:not(:root).svg-inline--fa{ display: none; }
#footer_nav_member .membership ul li{ text-align: center; }
#footer_nav_member .membership ul li:first-child{ color: #565656; font-weight: bold; }
#footer_nav_member .membership ul li a{ text-decoration:underline; display: block; margin: 1rem 0; color:#000; }
#footer_nav_member .membership ul li a:hover{ text-decoration:none;  }
#footer_nav_member .incart-btn{ float: none !important; }
#footer_nav_member .fa-user:before{ content:""; }


@media (min-width: 576px) { .footer_logo img{ width: 100px;} }
@media (max-width: 575.98px) {
    .footer_logo img{ width: 40%; margin: 0 auto 30px; }
}
@media (max-width: 575.98px) {
    #footer ul{ padding-bottom: 20px; }
    ul.footer_nav{ border-top:#949494 1px solid; }
    #footer ul li a{ text-decoration: none; display: block; width: 100%; border-bottom: #000 1px solid; padding: 10px 20px; }
}

/*Welcart CSS上書き*/
#footer_nav_member .incart-btn{ text-align: center; }
.incart-btn a { background-color: #8fc323; padding: .5rem;}
.incart-btn a span {display: inline-block; padding-left: 5px;}
.incart-btn  a span.total-quant{ color: #000; position: unset; background-color: #fff; text-align: center; border-radius: 2px; padding-left: 0;}


/*=================================================
下層ページ：共通(page.php)
===========================*/
#page_ttl-noimg{ font-size: 2.5rem; font-weight: bold; }
@media (max-width: 575.98px) {
    #page_ttl-noimg{ font-size: 1.6rem; }
}

/*=================================================
下層ページ：共通
===========================*/
.page_main{background-color: rgba(255, 255, 255, .6); padding: 4rem 0 150px;}
#page #ttl_area{ background: url(images/page_he_bg.png) no-repeat center center; background-size: cover; padding: 6rem 0;}
#page #ttl_area img.page_logo{ max-width: 300px; margin-bottom: 3rem;}
#page #ttl_area img.page_ttlimg{ max-width: 50%; }

.page_ttl{ padding: .5rem 5rem; position: relative; display: inline-block; margin: auto;}
.page_ttl span{
    text-shadow: 2px 2px 0 #878582;
    color: #fff;
    -webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;
    padding: 0;
    display: inline-block;
    font-size: 2.2rem;
    font-weight: bold;
}
.page_ttl:before{ position: absolute; top:0;}

.page_ttl.ttl_y{ background-color: #f3e100;}
.page_ttl.ttl_y:before{ content:url(images/arr_y.png); left:0;}
.page_ttl.ttl_b{ background-color: #7dc4d7;}
.page_ttl.ttl_b:before{ content:url(images/arr_b.png); left:0;}
.page_ttl.ttl_or{ background-color: #f8b726;}
.page_ttl.ttl_or:before{ content:url(images/arr_o.png); left:0;}
.page_ttl.ttl_gr{ background-color: #8fc322;}
.page_ttl.ttl_gr:before{ content:url(images/arr_g.png); left:0;}
.page_ttl.ttl_red{ background-color: #ef90b9;}
.page_ttl.ttl_red:before{ content:url(images/arr_r.png); left:0;}

.page_ttl.ttl_grey{ background-color: #bdbbb8;}
.page_ttl.ttl_grey:before{ content:url(images/arr_gr.png); left:0;}


.price{ padding: 0; position: relative; display: inline-block;}
.price span{
    text-shadow: 2px 2px 0 #f3e100;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;
    padding: 0 .5rem;
    display: inline-block;
    font-size: 2.2rem;
    font-weight: bold;
}

@media (max-width: 575.98px) {
    #page #ttl_area{ padding: 1rem 0; }
    #page #ttl_area img.page_logo {max-width: 150px; margin-bottom: 2rem; }
    #page #ttl_area img.page_ttlimg { max-width: 70%; }
    .page_ttl{ padding: .5rem; display: block; }
    .page_ttl span{ font-size: 1.6rem; }
}




/*=================================================
下層ページ：サービス
===========================*/
#service table {width: 100%; border-collapse: collapse; margin: 20px 0; table-layout: fixed;}
#service table th {padding: 1rem; background: #fff; text-align: left; color: #000; font-weight: bold; vertical-align: middle; text-align: center; font-size: 1rem;}
#service table td {padding: 1rem; vertical-align: middle; text-align: center; background: #fff; font-size: 1rem;}
#service table th img{ width: 100px; }

#service #service_section table{ border:4px solid #f3e100; }
#service #service_section table th{ border: 1px solid #f3e100; }
#service #service_section table th.th01{ background-color: #f6eca7; }
#service #service_section table th.th02{ background-color: #bfbfba;}
#service #service_section table td{ border: 1px solid #f3e100; }
#service #service_section table td:nth-child(2){ background-color: #fef9e3; }
#service #service_section table td:nth-child(3){ background-color: #f4f3f0; }

#service table th.th01{ background-color: #e1ecca; }
#service table th.th02{ background-color: #ddeced;}
#service table th.th03{ background-color: #f8e1e5;}
#service #monthly_section{ padding: 150px 0; }
#service #monthly_section table{ border:4px solid #7dc4d7; }
#service #monthly_section table th{ border: 1px solid #7dc4d7; }
#service #monthly_section table td{ border: 1px solid #7dc4d7; }

#service #year_section table{ border:4px solid #f8b726; }
#service #year_section table th{ border: 1px solid #f8b726; }
#service #year_section table td{ border: 1px solid #f8b726; }



.subject1{background-color: #8fc322; font-weight: bold; padding: 0 1rem; display: inline-block; margin: auto;}
.subject2{background-color: #7dc4d7; font-weight: bold; padding: 0 1rem; display: inline-block; margin: auto;}
.subject3{background-color: #ef90b9; font-weight: bold; padding: 0 1rem; display: inline-block; margin: auto;}


@media (max-width: 767.98px){}
@media (max-width: 575.98px) {
    #service table th {font-size: .8rem;}

    #service #monthly_section table th,
    #service #monthly_section table td,
    #service #year_section table th,
    #service #year_section table td { display: block; width: 100%; }
}



/*=================================================
下層ページ：サービス開始までの流れ
===========================*/
#flow_box{ border: 4px solid #8fc322; padding: 1rem; background-color: #fff;}
#flow_box .flow_box_string{border: 1px solid #8fc322; padding: 3rem 1rem; text-align: center; height: 100%; }
#flow_box .flow_box_string .step{ text-align: center; color:#8fc322; font-weight: bold; font-size: 2rem; letter-spacing: .2rem;}

@media (max-width: 575.98px) {
    #flow_box .col-md-4{ margin-bottom: 1rem; }
}



/*=================================================
下層ページ：FAQ
===========================*/
#page.faq a{ color: #ef90b9; font-weight: bold; }
.smb-faq__item:first-child{ border-top: none; }
.smb-faq__item{ border-bottom: 2px solid #8e8e8e; }
.smb-faq__item__question__label , .smb-faq__item__answer__label{
    font-size: 2.2rem;
    font-weight: bold;
    padding: 0;
    position: relative;
    color: rgba(0, 0, 0, 0);
}
.smb-faq__item__question__label:after{
    content:'Q';
    position: absolute;
    top:-7px;
    left: 0;
    text-shadow: 2px 2px 0 #f8b726;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;
    padding: 0 .5rem;
    display: inline-block;

}

.smb-faq__item__answer__label:after{
    content:'A';
    position: absolute;
    top:-7px;
    left: 0;
    text-shadow: 2px 2px 0 #ef90b9;
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: 1px #000;
    text-stroke: 1px #000;
    padding: 0 .5rem;
    display: inline-block;

}


/*=================================================
下層ページ：利用規約 + 特定商取引
===========================*/
#termsofuse dt { color:#ef90b9; font-weight: bold; font-size: 1.2rem ; margin-top: 2rem; margin-bottom: 1rem;}
#termsofuse p{ margin-bottom: 1rem; }
#termsofuse ol { padding-left:1.5rem;}
#termsofuse ol li {list-style-type: decimal; padding-left: 1rem;}

#mailimg{ max-width: 100%; width: 150px; }
#termsofuse a{ color: #ef90b9;}



/*=================================================
下層ページ：お問い合わせフォーム・解約の申し込み
===========================*/
#page .border_y{ padding: 1rem; border:4px solid #f3e100; background-color: #fff; }
#page.contact .mwform-checkbox-field label,
#page.contact .mwform-radio-field label{background-color: #faf5c5; }
#page.contact #gakunen02 { font-weight: bold; color: #000; }
#page.contact #gakunen02 input[type=text]{ width: 30%; display: inline-block; }
#page .border_y.contact_form [type="submit"]{ background-color: #f8b726; color:#fff; }
@media (min-width: 992px) {
    #page.contact #gakunen01 label{ width: 30%; display: inline-block; }
}
@media (max-width: 991.98px) {
    #page.contact .mw_wp_form .horizontal-item + .horizontal-item{display: block; margin-left: 0 }
}

#page .border_grey{ padding: 1rem; border:4px solid #a19f9b; background-color: #fff; }
#page.cancellation .mwform-checkbox-field label{background-color: #daeaf1; }
#page .border_grey.contact_form [type="submit"]{ background-color: #7dc4d7; color:#fff; }




#page .contact_form table label{display: block; letter-spacing: .1em; color: #000; font-weight: bold;}
#page .contact_form table { width: 100%; border-collapse: collapse; margin: 20px 0; table-layout: fixed; }
#page .contact_form table tr{ border-bottom: 2px solid #ddd; }
#page .contact_form table th ,
#page .contact_form table td{ border:none; color:#000; }
#page .contact_form table th {font-weight: 400; line-height: 40px; vertical-align: top; letter-spacing: .06em; color: #000;  width: 28%; line-height: 1.5rem;}

input[type=text],
input[type=email],
input[type=tel] {
    font-weight: 400;
    width: 100%;
    height: 48px;
    padding: 0 12px;
    letter-spacing: .1em;
    border: none;
    background: #f2f2f2;
}
textarea {
    font-weight: 500;
    line-height: 1.5;
    width: 100%;
    height: 200px;
    margin-top: -3.5px;
    margin-bottom: -3.5px;
    padding: 12px;
    letter-spacing: .1em;
    border: none;
    background: #f2f2f2;
}
[type="submit"]{ margin: auto; }



.form-check{ padding-left: 0; }
.mwform-checkbox-field label,
.mwform-radio-field label{ padding: 10px 20px ; border-radius: 5px; display: block; width: 100%; height: 100%; margin-bottom: 1rem; }
.mwform-checkbox-field label:hover,
.mwform-radio-field label:hover{ cursor: pointer; }

#page .contact_form [type="submit"].back { transition: .5s; margin: 0 auto; background-color: #ccc; border-radius: 3px; border: none;}
#page .contact_form [type="submit"].back:hover{ opacity: 0.4; filter: alpha(opacity=60);}


@media (min-width: 768px) {
    #page.service img.main_img{ width: 70%; margin: 0 auto; }
    .mw_wp_form{ padding:.5rem 4rem; }
    .tel_size{ width: 50%; }

}
@media (max-width: 575.98px) {
    #page.company img{ width: 50%; margin: 0 auto; margin-bottom: 2rem; }
    #page.contact table , #page.contact table th , #page.contact table td{ display: block; width: 100%; }
    #page.contact table th{ padding: 0; }
    #page.contact table td{ padding: 0 0 15px 0; }
    #page.contact .sosin , #page.contact .back{ width: 100%; }
    .mw_wp_form.mw_wp_form_preview{ padding-top: 5rem; }
    .mw_wp_form{ padding:.5rem; }
    .tel_size{ width: 90%; }
}



/*=================================================
新着情報
===========================*/
.post_list_box{ border-top: 3px solid #d2d2d2; box-sizing:border-box; padding: 1rem 0; }
.post_list_box h3{ font-size: 1.2rem; font-weight: bold; }
.post_list_img{ position: relative; }

.post_list_more a{ border: 1px solid #777; display: inline-block; padding: .5rem 2rem; font-size: .85rem;  }
.post_list_more a:hover{ background-color: #77C260; border-color:#77C260; color: #fff; text-decoration: none; }
.bor_b{ border-bottom: 1px solid #ddd; margin-bottom: 10px; }

#single h2{ font-weight: bold; font-size: 1.4rem; }
#single .post_list_img .cat_label{ position: absolute; top:10px; left:-10px; }

#side ul { padding: 0 15px; }
#side ul li { border-bottom: 1px dotted #ddd; padding: 10px 0 ; margin: 10px 0; }
#side ul li h4{ font-size: 1rem; font-weight: bold;}
#side ul li .cat_color_icn{ height: 1rem; width: 1rem; border-radius: 2px; display: inline-block; margin-right: 10px; }
#side ul li h4 a , #side .category-list li a{ display: block; width: 100%; height: 100%; }
#side .cat_label a{ padding: 0 10px; margin-right: 5px;}


@media (max-width: 575.98px) {
    .bor_b{ margin-top: 1rem; }
    .post_list_img img{ width: 100%; }
    .bor_b h3{ width: 70%; }
    .bor_b .cat_label{ width: 28%; }
    #side { border-top: 5px solid #ddd; margin-top: 30px; padding-top: 20px; }
}


/*=================================================
声
===========================*/
#arc_voice .voive_box{ border-top: 3px solid #d2d2d2; box-sizing:border-box; padding: 1rem 0 3rem;  }
#arc_voice .chtxt{ font-size: 1.3rem; padding: 1rem 0 ; }
#arc_voice .bg{ background-color: #77C260; padding: .5rem 1rem; border-radius: 2px; }
#arc_voice .details{ border:1px solid #d2d2d2; padding: 2rem 1rem 1rem 0; margin-top: -2rem; margin-left: 1rem; font-size: .9rem;}
#arc_voice .link a{ background-color: #77C260; padding: 5px 20px; color:#fff; border-radius: 2px }

.item span{ background-color: #77C260; color: #fff; padding: 0 10px; display: inline-block; margin-left: 20px; border-radius: 50px; line-height: 130%; font-size: .8rem; margin-left: 20px; margin-right: 5px;}

#side_voice h3{ line-height: 1.2rem; border-top: 4px solid #ddd; padding-top: 15px; margin-top: 15px;}
#side_voice h3 a{ font-size: 1rem; font-weight: bold; }
#side_voice .img{ width: 30%; padding-right: 5%;}
#side_voice .img img{ border-radius: 5px; }
/*.side_voice_box{ border-top: 3px solid #ddd; padding-top: 10px; margin-top: 20px; }*/



@media (max-width: 575.98px) {
    #arc_voice .link a{ display: block; }
    #arc_voice .ch { width: 30%; padding-right: 15px; padding-bottom: 15px;}
    #arc_voice .ch img{  border-radius: 3px; }

}

/*=================================================
カード・ページネーション
===========================*/
.card .img img{ width: 100%;}

#pagination ul li{display: inline-block;}
#pagination ul li span.current ,
#pagination ul li a{
    color: #fff;
    display: block;
    margin: 0 2px;
    padding: 0;
    background:#777;
    width: 50px;
    line-height: 50px;
    text-align: center;
    /*position: relative;*/
    border-radius: 2px;
    text-align: center;
}
#pagination ul li span.current { background-color: #77C260; color: #fff; }
#pagination ul li a:hover{ text-decoration: none; background-color: #f6e6e6; color: #777;}
#pagination ul li a.prev ,#pagination ul li a.next { font-size: .8rem; }







/*=================================================
タイトルセット
===========================*/
.indexttl{ font-weight: bold; color: #fff; text-align: center; margin-top: -2rem; margin-bottom: 1rem;}
.indexttl h2{ display: inline-block; margin: 0 auto; background-color: rgba(0, 0, 0, 0.9); padding: 10px; z-index: 9; box-shadow: 3px 3px 0 #ccc; padding: .8rem 5rem; font-size: 1.5rem;}
.indexttl .slug{ font-size: .9rem; font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; color: #77C260; display: block; margin-top: 5px; font-weight: normal; text-transform: uppercase; }
#pan{ padding-bottom: 1rem; font-size: .8rem; }

@media (max-width: 575.98px) {
    .indexttl h2{ font-size: 1.5rem;  width: 90%; padding: 1.3rem .5rem;}
}




/*=================================================
商品
===========================*/
/*カテゴリー*/
.itemimg{ border: 1px solid #ddd; box-sizing:border-box; }
.cat_item{ margin-bottom: 3rem; }


/*詳細*/
#item_single .item-name{ font-size: 1.4rem; font-weight:bold; padding:3rem 0; margin-bottom: 3rem; }
.intro_name{ padding: .5rem 1rem; margin-bottom: 2rem; background: #ffedb8; padding: 1rem 2rem; border-radius: 10px;}
.intro_name input[type=text]{ margin-top: -20px; background: #fff;}
#all-services{ margin: 5rem 0; }
.item-info .field_cprice{ display: none; }


/*カート*/
#primary.page_main{ padding: 5rem 0; }
.customer_form , #primary table{ background-color: #fff; }



/*ラインナップ*/
.lineup_ttl{position: relative; display: block; padding: 0 65px; text-align: center; font-size: 2.5rem; }
h2.lineup_ttl:before,
h2.lineup_ttl:after {
    position: absolute;
    top: calc(50% - 3px);
    width: 30%;
    height: 10px;
    content: '';
    background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
    background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
h2.lineup_ttl:before {left: 0; }
h2.lineup_ttl:after {right: 0; }
@media (min-width: 769px) {
    h2.lineup_ttl:before, h2.lineup_ttl:after{ width: 35%;}
}
@media (max-width: 575.98px) {
    .lineup_ttl{ font-size: 1.9rem; }
    h2.lineup_ttl:before, h2.lineup_ttl:after{ width: 20%;}
}

.linup { padding: 1rem 0; box-sizing:border-box; background-color: #fff; }
.linup h3{ font-size: 1.1rem; font-weight: bold; padding: .1rem 1rem;}
.linup .text_area{ width : -webkit-calc(30% - 40px) ; width : calc(30% - 40px) ; padding: 0 20px; }
.linup .bnr_area{ width : -webkit-calc(35% - 40px) ; width : calc(35% - 40px) ; padding: 0 20px; }

.linup.subject1 {border: 3px solid #8fc322 ;}
.linup.subject1 h3{ background-color:#8fc322; }
.linup.subject2 { border: 3px solid #7dc4d7 ;}
.linup.subject2 h3{ background-color:#7dc4d7;  }
.linup.subject3 {border: 3px solid #ef90b9 ;}
.linup.subject3 h3{ background-color:#ef90b9;  }
@media (max-width: 768px) {
    .linup .text_area{width: 40%; }
    .linup .bnr_area{width: 30%; }
    .linup .bnr_area img{ width: 100%; }
}
@media (max-width: 575.98px) {
    .linup .text_area , .linup .bnr_area{ width :100%; }
    .linup .bnr_area { padding: 1rem; }
}


/*詳細初期設定クリア*/
.item-info .field_price{ margin-bottom: 1rem; }
.item-info .item-option{padding: 0;}
.item-info .item-option dd{margin: 0 0 0;}
.item-info .field_price em {font-size: .7em; }
.item-info .field_price{ font-size: 1.7rem; }
.item-info .field{ text-align: unset; }
.item-info .field_price{ float: none; }
.item-info .c-box{ text-align: center; }
.item-info .skubutton{background-color: #7ac262;}


/*=================================================
マイページ
===========================*/
.error_message { text-align: center; }
.loginbox .member-box { text-align: center; }
.loginbox #nav{ margin-top:2rem; padding-top: 2rem; border-top:1px solid #ddd; text-align: center; }
.loginbox .new-entry h2{ text-align: center; }

.send{ text-align: center; margin-top: 3rem; }
.send input{ display: block; margin: 1rem auto;}
.send input[type="submit"].editmember{ background: #7ac262; color: #fff; font-size: 1.2rem; font-weight: bold;}
.send input[type="submit"].editmember:hover{ background: #abd69c; }



/*会員ログイン*/
.item-name ,
.member_page_title ,
.cart_page_title { text-align: center; font-weight: bold; font-size: 1.2rem; position: relative; padding: 1.5rem 1rem;}

.item-name:after,
.member_page_title:after,
.cart_page_title:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}




@media screen and (min-width: 38.75em){
    #wc_login .error_message{ width: 100%; }
}


/*=================================================
テキストアニメーション
===========================*/
.animate , .animate1 , .bottom , [data-sr] { visibility: hidden; }


.txt_animate {
  opacity: 0;
}
.txt_animate span {
  position: relative;
  top: 10px; /* left: 10px; topとleft同時指定で斜めの動き*/
  opacity: 0;
}








/*=================================================
以下使ってないかも
投稿
===========================*/
a.read-more{ text-decoration: underline; }
a.read-more:hover{ text-decoration: none; }
.day{ text-align: right; font-size: .8rem; }
.card-body{ /*padding: 0 !important; */}
.card-body h2 , .card-body p , .card-body .day{ padding: 0 1rem; }
.card-body h2 { position: relative; }
.cat_label a{ display: inline-block; padding: 3px 20px; color: #fff; font-size: .8rem; border-radius: 2px;}
.cat_label a:hover{ color: #fff; opacity: .7;}
.newpost{ position: absolute; top:-5px; right: -5px; }

.more_btn a{ display: inline-block; background: #77C260; box-shadow: 3px 3px 0 #ccc; padding: 10px 50px; color: #fff;}
.more_btn a:hover{ color: #fff; background: #b5dc39 /*63abd5*/; text-decoration: none; }



/*=================================================
タイトルセット
===========================*/
h2.main_ttl{ text-align: center; color: #fff; text-transform: uppercase; background: url(images/bg_ttl.png ) no-repeat center center #77C260; line-height: 6rem; }






/*=================================================
多分TOPページ
===========================*/
/*新着*/
#newspost h2{ font-size: 1rem; padding: 20px 1rem 15px; margin: 0; }
#newspost h2.main_ttl{ font-size: 2rem; }
#newspost .cat_label a {display: block; padding: 3px 20px; color: #fff; font-size: .8rem; border-radius: 2px; text-align: center; width: 100%; }


/*声*/
#voice h2{ position: relative; margin-top: 55px; }
#voice h2:after{ position: absolute; content: ""; height: 48px; width: 2px; background: #333; margin: 0 auto; left:0 ; right:0; top:-55px; }
#voice h2 span{ text-transform: uppercase; display: block; color: #77C260; font-size: 1rem; margin-bottom: 5px; }
#voice .voice_box a:hover{ opacity: .6;  z-index: -1;}
#voice .voice_box img{ width: 100%; }
#voice .voice_box { position: relative; }
#voice .voice_box .voice_name{ position: absolute; top:-50px; left:10px; background: #77C260; padding: 5px 10px;  z-index: 10;}
#voice .location{ font-size: .85rem; }
#voice .chtxt{ background-color: rgba(77, 77, 77, 0.78); padding: 10px; z-index: 9; position: absolute; bottom: 0; margin-bottom: 0; width: 100%; text-align: center; color: #fff; font-size: .9rem; }
#voice .chtxt a , #voice .chtxt a:hover{ color: #fff; }


@media (min-width: 576px)  {

    #newspost .cat_label { width: 15%; text-align: center; margin-right: 2rem; }
}
@media (max-width: 575.98px) {
    #newspost .cat_label , #newspost .day{ display: inline-block; }
    #newspost .cat_label { margin-right: 1rem; }
    #newspost h2 a{ text-decoration: underline;}
}



@media (max-width: 991.98px) {
    #newspost .col-6:nth-child(odd){ padding-left: 10px !important; padding-right: 5px !important; }
    #newspost .col-6:nth-child(even){ padding-left: 5px !important; padding-right: 10px !important; }
}