@charset "UTF-8";

/***************** COMMON *****************/ 
.bg_beige .page_ttl {
    position: absolute;
    top: -45px;
}
.img_full_box {
    width: 100%;
    margin: 50px auto;
}
.img_full_box img { width: 100%;}

.column_box p {
    margin-bottom: 20px;
}
.inner_box {
    width: 90%;
    margin: auto;
}
.price {
    margin: 30px auto 50px;
}
.price_box {
    text-align: center;
    font-size: 15px;
}
.caption_small_box {
    width: 80%;
    margin: 3.0rem auto;
}
.blue_box {
    border: 1px solid #338db1;
    box-sizing: border-box;
    padding: 1.5rem 2rem;
    background: #FFF;
}

/***************** CREDIT PAYMENT (STRIPE) *****************/ 
.credit_box {
    width: 50%;
    margin: auto;
}
.credit_box form .wpfs-form-actions{
    display: inline-block;
    margin: 5% auto 3% 3%;
    text-align: center;
    width: 100%;
}

/***************** PAGER *****************/ 
.pagenext,
.pageprev {
    margin: 40px 10px 10px 10px;
    color: #FFF;
}

.pagenext a,
.pageprev a {
    color: #FFF;
}

.pager{
	text-align:center;
}
a.page-numbers,
.pager .current{
    width: 30px;
    display: inline-block;
    margin: 25px 5px;
    font-size: 11px;
    opacity: 1.0;
    background-color: #FFF;
    transition: .4s;
    letter-spacing: 3px;
    padding: 8px 2px;
    color: #666;
    text-align: center;
    font-weight: bold;
}

.current{
	width: 30px;
    display: inline-block;
    margin: 25px 5px;
    font-size: 11px;
    opacity: 1.0;
    background: linear-gradient(45deg, #666 0%, #999 100%);
    transition: .4s;
    letter-spacing: 3px;
    padding: 8px 2px;
    color: #FFF;
    text-align: center;
    font-weight: bold;
}

a.page-numbers:hover ,
.pager .current:hover {
    color: #FFF;
    background: linear-gradient(45deg, #338db1 0%, #7ecef4 100%);
}


/***************** SLIDE SETTING *****************/  
.slider_box {
    width: 80%;
    margin: 30px auto;
}
.slider_box .img_box {
    text-align: center;
    margin-bottom: 30px;
}
.slider_box .bt_box {
    text-align: center;
}

/***************** TOP *****************/  

.label {
    width: 100%;
    padding: 3px 5px;
    color: #FFF;
    font-size: 9px;
    letter-spacing: normal;
    text-align: center;
    display: inline-block;
}

.label.information {
    background: #666;
}

.label.media {
    background: #b28850;
}

.label.service {
    background: #00709e;
}

.label.blog {
    background: #71add7;
}

.label-list {
    background: #666;
    padding: 0px 10px;
    text-align: center;
    color: #FFF;
    display: block;
    width: 120px;
}

.list_type_info {
    margin: auto;
    font-size: 14px;
    letter-spacing: 1px;
}
#article .list_type_info {
    margin: 40px auto;
    font-size: 14px;
    letter-spacing: 1px;
}
#article .media img {
    width: 60%;
    height: auto;
    margin: auto 20%;
    text-align:center; 
}  

#article .media {
    text-align: center;
}

#article .column_box 
.date {
    font-size: 12px;
    margin-right: 10px;
}

.column_box hr {
    width: 100%;
    margin: 40px auto;
    padding: 0;
}

.list_type_info dt {
    width: 10%;
    margin-right: 5%;
    color: #FFF;
    font-size: 10px;
    text-align: center;
    float: left;
    clear: left;
    margin-bottom: 15px;
}
#article .list_type_info dt {
    float: none;
}

.list_type_info dd {
    width: 85%;
    margin-bottom: 15px;
    margin-left: 15%;
}
#article .list_type_info dd {
    width: 100%;
    margin-bottom: 15px;
    margin-left: 0;
}
.list_type_info dd a {
    color: #333;
}

.list_type_info dd a:hover {
    color: #00709e;
}

.list_type_info .bt_box {
    float: right;
}


.recommend_box dt {
    width: 3%;
    text-align: right;
}

.blog img { width: 10px;}

.txt_ul {
    background:rgba(227,239,246,1.00);
    display: inline;
}

/***************** PROFILE *****************/  

.profile { margin-bottom: 70px;}
.profile .left_box {
    width: 500px;
}
.profile .right_box {
    width: 460px;
    margin-left: 40px;
}
.profile .name { margin-bottom: 30px;}

.greeting {
    background: url("../img/profile/img_greeting_202107.png") no-repeat top right;
}

/***************** FAQ *****************/ 

.faq_list_box a {
    color: #FFF;
}
.faq_list_box li {
    padding:1% 2%;
    width: 27%;
    margin: 10px 1%;
    float: left;
}
.faq_list_box span {
    float: right;
    font-size: 80%;
}
.faq_list_box .btn_designW a {
    color: #00709e;
}

.faq_detail h3 {
    text-align: left;
    padding-top: 30px;
    border-top: dashed 1px #666;
    margin-top: 30px;
}
.faq_detail h4 { 
    text-align: left;
    font-size: 17px;
    font-weight: bold;
    padding: 0 3%;
    background:rgba(227,239,246,1.00);
    display: inline;
}

.faq dt {
    color: #00709e;
    margin: 30px auto 15px auto;
}

.faq .btn_designA {
    width: 50%;
    padding: 1% 5%;
    margin-left: 0px;
}
.faq_detail .bt_box{ margin-bottom: 60px;}

@media screen and (max-width: 767px) {
    
/***************** COMMON *****************/ 
.bg_beige .page_ttl {
    position: absolute;
    top: -1.7%;
}
.caption_small_box {
    width: 90%;
    margin: 30px auto;
}
    
    
[class*="heightLine"] {
        height: auto !important;
    }    
    
/***************** PAGER *****************/ 

.pagenext,
.pageprev {
    margin: 0px 2.5%;
    float: left;
    width: 45%;
}



/***************** SLIDE SETTING *****************/  
.slider_box {
    width: 90%;
    margin: 30px auto;
}
    
.slider_box .img_box img { width: 100%;}
    
/***************** TOP *****************/  
.label {
    width: 90%;
    padding: 0px 5px;
    color: #FFF;
    font-size: 10px;
    text-align: center;
    display: inline-block;
}
    
.list_type_info {
    margin: 0 auto 30px auto;
    width: 100%;
}

    
#article .list_type_info {
    margin:auto;
    width: 100%;
}
#article .column_box {
   padding-bottom: 10px;
    border-bottom: 1px dotted #999;
    margin-bottom: 30px;
}   
    .column_box h3 {
        margin-top: 30%;
    }
    .column_box h3 img { width: 5%;}
    
.list_type_info dt {
    width: 30%;
    margin-right: 1%;
    color: #FFF;
    font-size: 10px;
    text-align: center;
    float: none;
    clear: both;
    margin-bottom: 20px;
    margin-top: 20px;
    border-bottom: none;
}

.list_type_info dd {
    width: 100%;
    padding-bottom: 30px;
    border-bottom: 1px dotted #999;
    margin-left: 0;
}
	
	#article .column_box img { height: auto;}

/***************** FAQ *****************/ 

.faq_list_box li {
    padding:1% 2%;
    width: 96%;
    margin: 10px 0%;
    float: left;
}

.faq .btn_designA {
    width: 88%;
    padding: 1% 5%;
    margin-left: 0px;
}
    
/***************** CREDIT PAYMENT (STRIPE) *****************/ 
.credit_box {
    width: 100%;
    margin: auto;
}

/***************** GENERAL WINDOW *****************/  
.page_ttl {
        width: 45%;
    }
    
.profile .left_box {
    width: 100%;
}
.profile .right_box {
    width: 90%;
    margin:auto;
}
.profile .name { margin: 30px auto;}

.greeting {
    background:none;
}
    
}