@charset "UTF-8";

/* -----------------------------------------------
 *  	         Portal component setting
 * ----------------------------------------------- */

/* =========== component =========== */
h3{
	margin: 0 0 10px 0;
}
h4{
	font-size: 2.4rem;
	margin: 0 0 10px 0;
}
@media only screen and (max-width: 30em) {
	h4{
		font-size: 16px;
	}
}

/* ===================== flexBox ===================== */
/*flex_center 1段 中央 */
.flex_center{
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex_center > div.flex_center_inner{
	width: 100%;
}

/*flex_1A 1段 50→100 */
.flex_1A{
	display: flex;
	justify-content: center;
}
.flex_1A div:first-child{
	width: 49%;
}
@media only screen and (max-width: 30em) {
    .flex_1A{
        display: block;
    }
    .flex_1A div:first-child{
        width: 100%;
        margin: 0 0 30px 0;
    }
}

/*flex_2A 2段 48:48 */
.flex_2A{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex_2A > div, .flex_2A > section{
    width: 49.5%;
}

@media only screen and (max-width: 48em) {
.flex_2A > div, .flex_2A > section{
	width: 100%;
}
}

/*flex_2B 2段 67:30*/
.flex_2B{
	display: flex;
	justify-content: space-between;
}
.flex_2B .flex_2B_innerA{
	width: 67%;
}
.flex_2B .flex_2B_innerB{
	width: 30%;
}
@media only screen and (max-width: 48em) {
.flex_2B{
	display: block;
}
.flex_2B .flex_2B_innerA{
	width: 100%;
	margin: 0 0 10px 0;
}
.flex_2B .flex_2B_innerB{
	width: 100%;
}
}

/*flex_2C 2段 55:45 */
.flex_2C{
	display: flex;
}
.flex_2C div:first-child{
	width: 45%;
}
.flex_2C div:nth-child(2){
	width: 55%;
}
@media only screen and (max-width: 30em) {
.flex_2C{
	display: block;
}
.flex_2C div:first-child{
	width: 100%;
}
.flex_2C div:nth-child(2){
	width: 100%;
}
}

/*flex_2D 2段 50:50 中央寄せ */
.flex_2D{
	display: flex;
	align-items: center;
	justify-content: center;	
}
.flex_2D div.flex_2D_inner, .flex_2D section.flex_2D_inner{
	width: 50%;
}

@media only screen and (max-width: 30em) {
.flex_2D{
	display: block;
}
.flex_2D div.flex_2D_inner, .flex_2D section.flex_2D_inner{
	width: 100%;
}
}

/*flex_2E 2段 48:48→100 */
.flex_2E{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex_2E div.flex_2E_inner, .flex_2E section.flex_2E_inner{
	width: 48%;
}
@media only screen and (max-width: 30em) {
.flex_2E{
	display: block;
}
.flex_2E div.flex_2E_inner, .flex_2E section.flex_2E_inner{
	width: 100%;
	margin: 0 0 20px 0;
}
}

/*flex_2E 2段 48:48 */
.flex_2F{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.flex_2F .flex_2F_inner{
	width: 48%;
	margin: 3% 1% 0 1%;
}  

/*flex_2 2段 80:18*/
.flex_2G{
	display: flex;
	justify-content: space-between;
}
.flex_2G .flex_2G_innerA{
	width: 80%;
}
.flex_2G .flex_2G_innerB{
	width: 18%;
}
@media only screen and (max-width: 48em) {
.flex_2G{
	display: block;
}
.flex_2G .flex_2G_innerA{
	width: 100%;
	margin: 0 0 10px 0;
}
.flex_2G .flex_2G_innerB{
	width: 100%;
}
}

/*flex_3A 3段 32%左右均等配置*/
.flex_3A{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.flex_3A > div, .flex_3A > li , .flex_3A > section{
	width: 31%;
	margin: 0 0 10px 0;
}

@media only screen and (max-width: 48em) {
.flex_3A{
	display: block;
}
.flex_3A > div, .flex_3A > li , .flex_3A > section{
	width: 100%;
	margin: 0 0 10px 0;
}
}

/*flex_3B 3段 32% 左寄せ配置右空き ソート対策用*/
.flex_3B{
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start;
}
.flex_3B > div, .flex_3B > li , .flex_3B > section{
	width: 31%;
	margin: 0 2% 10px 0;
}

@media only screen and (max-width: 48em) {
.flex_3B{
	display: block;
}
.flex_3B > div, .flex_3B > li , .flex_3B > section{
	width: 100%;
	margin: 0 0 10px 0;
}
}

/*flex_3C 3段 32%左右均等配置 変動なし*/
.flex_3C{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.flex_3C > div, .flex_3C > li , .flex_3C > section{
	width: 31%;
	margin: 0 0 0 0;
}

@media only screen and (max-width: 48em) {
}





/* ======= component_BOX ======= */
.box_A{
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
background-color: #f5f5f5;
border:solid 1px #e8eaed;
}

.box_B{
border-radius: 10px;
margin-bottom: 10px;
padding: 20px;
border:solid 1px #e8eaed;
background-color: #fff;
}

.box_C{
border-radius: 10px;
margin-bottom: 10px;
padding: 10px;
background: -webkit-repeating-linear-gradient(-45deg,#e4efff 0,#e4efff 2px,#fff 2px,#fff 4px);
background: -o-repeating-linear-gradient(-45deg,#e4efff 0,#e4efff 2px,#fff 2px,#fff 4px);
background: repeating-linear-gradient(-45deg,#e4efff 0,#e4efff 2px,#fff 2px,#fff 4px);
border:solid 1px #e4efff;
}

.box_D{
border-radius: 10px;
margin-bottom: 10px;
padding: 20px;
border:solid 1px #e8eaed;
background-color: #fff;
}

/* ======= component_TXT ======= */
/*heading*/
.heading_01{
    text-align: center;
    margin: 15px 0;
}

.txt_01{
	font-size: 1.4rem;
}
.txt_02{
	font-size: 1.6rem;
}
.txt_03{
    font-size: 1.2rem;
}

@media only screen and (max-width: 48em) {
}


/* ======= component_BTN ======= */
/* btn_2 */
div.btn_2 a{
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: solid 1px #888888;
    border-radius: 10px;
    text-decoration: none;
    padding: 10px 10px;
    margin: 0 0 5px 0;
    background-color: #fff;
}
div.btn_2 a:hover{
    background-color: #fce8e6;
}


iframe.spred{
    width: 100%;
    height: 500px;
}

ul{
    list-style: none;
}


/* =====================graphic request===================== */
.g_item_title {
	font-size: 16px;
	margin-bottom: 2%;
	line-height: 1.3;
}
.g_item_title span {
	font-size: 12px;
}
.g_item_contents {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 5%;
    max-width: 700px;
}

/* 3item or 5item */
.g_item01 {
	width: 32%;
	margin-bottom: 3%;/* 5item用 */
}

/* 4item */
.g_item02 {
	width: 24%;
}

/* 2item */
.g_item03 {
	width: 48%;
}

/* 768px */
@media only screen and (max-width: 48em) {
.g_item01 {
	width: 48%;
	margin-bottom: 5%;
	}
.g_item02 {
	width: 48%;
	margin-bottom: 5%;
	}
}

/*table*/
table.form_table{
	width: 100%;
	max-width: 700px;
	border-spacing: 0;
	border: solid 1px #d8d6d5;
}
table.form_table tr{
	border: solid 1px #d8d6d5;
}
table.form_table tr th:first-child{
	width: 80px;
}
table.form_table tr th{
	border: solid 1px #d8d6d5;
	padding: 5px;
}
table.form_table tr td{
	border: solid 1px #d8d6d5;
	padding: 5px;
}
/* =========== component =========== */



/* =====================BRAND===================== */
dl {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
dl dt {
	width: 20%;
}
dl dd {
	width: 80%;
}
dl dd strong {
	font-size: 1.8rem;
}
span.brand_icon {
	display: inline-block;
    width: 100px;
    margin: 0 5px 5px 0;
    text-align: center;
    background-color: #434343;
    color: #fff;
    font-size: 12px;
    letter-spacing: 1.2px;
    padding: 3px;
    font-family: "Quicksand";
}
.image_box_A {
	text-align: center;
}
.image_box_A img {
	width: 80% !important;
	padding-top: 20px;
}
/* ブランドカラー*/
span.color_box_tcy1::before,
	.color_box_tcy2::before,
	.color_box_sjc1::before, 
	.color_box_exc1::before,
	.color_box_cbr1::before,
	.color_box_gom1::before,
	.color_box_clo1::before,
	.color_box_hfr1::before,
	.color_box_sgs1::before,
	.color_box_oak1::before,
	.color_box_lph1::before,
	.color_box_mgh1::before,
	.color_box_jsg1::before{
    content: "";
	background-color: #000000;
	font-size: 11px;
	padding: 0 8px;
	margin-right: 2px;
	margin-left: 5px;
}


/* ============================■■共通CLASS■■============================ */
/* clearfix */
.clearfix::after {
  display: block;
  visibility: hidden; 
  clear: both;
  height: 0;
  content: "";
}

/* ===========bgColor=========== */
.bg_color1{background-color: #f5f5f5 !important;}
.bg_color2{background-color: #fff !important;}
.bg_color3{background-color: #AA8E76 !important;}
.bg_color4{background-color: #78d297 !important;}

/* =========== flexSetting =========== */
/*flex-direction*/
.row-reverse{flex-direction: row-reverse !important;}
.column{flex-direction: column !important;}
.column-reverse{flex-direction: column-reverse !important;}

/* =========== 出現|削除 =========== */
.app768,.app480{display: none!important;}
/* 768px */
@media only screen and (max-width: 48em) {
.del768{display:none!important;}
.app768{display:block!important;}
}
/* 480px */
@media only screen and (max-width: 30em) {
.del480{display:none!important;}
.app480{display:block!important;}
}

/* =========== color =========== */
.white{ color:white !important;}
.black{ color:black !important;}
.brown1{color: #a17b30!important;}
.brown2{color: #AA8E76!important}
.blue{color: #00A3D9!important;}
.red{color: #B20000!important;}
.orange{color: #FF8000!important;}
.green{color: #78d297!important;}

/* =========== fontweight =========== */
.bold{font-weight: bold!important;}
.normal{font-weight: normal!important}

/* =========== limit =========== */
.limited{width:96%; margin:0 auto;}

.limit1600{max-width:1600px; margin:0 auto;}
.limit1400{max-width:1400px; margin:0 auto;}
.limit1200{max-width:1200px; margin:0 auto;}
.limit1050{max-width:1050px; margin:0 auto;}
.limit1024{max-width:1024px; margin:0 auto;}
.limit960{max-width:960px; margin:0 auto;}
.limit768{max-width:768px; margin:0 auto;}
.limit480{max-width:480px; margin:0 auto;}
.limit360{max-width:360px; margin:0 auto;}
.limit200{max-width:200px; margin:0 auto;}
.limit150{max-width:150px; margin:0 auto;}

/* =========== img limit =========== */
.img_limit300{max-width:300px; margin:0 auto;}
.img_limit200{max-width:200px; margin:0 auto;}
.img_limit150{max-width:150px; margin:0 auto;}
.img_limit100{max-width:100px; margin:0 auto;}
.img_limit50{max-width:50px; margin:0 auto;}
.img_limit35{max-width:35px; margin:0 auto;}

/* ========== margin ========== */
.m0{ margin:0 !important; }

/* ========== marginBottom ========== */
.mb0{ margin-bottom:0 !important; }
.mb5{ margin-bottom:5px !important; }
.mb10{ margin-bottom:10px !important; }
.mb20{ margin-bottom:20px !important; }
.mb30{ margin-bottom:30px !important; }
.mb40{ margin-bottom:40px !important; }
.mb50{ margin-bottom:50px !important; }
.mb60{ margin-bottom:60px !important; }
.mb70{ margin-bottom:70px !important; }
.mb80{ margin-bottom:80px !important; }
.mb90{ margin-bottom:90px !important; }
.mb100{ margin-bottom:100px !important; }

/* ========== marginBottomParcent ========== */
.mb0p{ margin-bottom:0 !important; }
.mb01p{ margin-bottom:1% !important; }
.mb02p{ margin-bottom:2% !important; }
.mb03p{ margin-bottom:3% !important; }
.mb05p{ margin-bottom:5% !important; }
.mb10p{ margin-bottom:10% !important; }
.mb15p{ margin-bottom:15% !important; }
.mb20p{ margin-bottom:20% !important; }
.mb30p{ margin-bottom:30% !important; }
.mb40p{ margin-bottom:40% !important; }
.mb50p{ margin-bottom:50% !important; }
.mb60p{ margin-bottom:60% !important; }
.mb70p{ margin-bottom:70% !important; }
.mb80p{ margin-bottom:80% !important; }
.mb90p{ margin-bottom:90% !important; }
.mb100p{ margin-bottom:100% !important; }

/* ========== padding ========== */
.pd0{ padding:0 !important; }
.pd5{ padding:5px !important; }
.pd10{ padding:10px !important; }
.pd15{ padding:15px !important; }
.pd20{ padding:20px !important; }
.pd25{ padding:25px !important; }
.pd30{ padding:30px !important; }
.pd35{ padding:35px !important; }
.pd40{ padding:40px !important; }
.pd45{ padding:45px !important; }
.pd50{ padding:50px !important; }
.pd55{ padding:55px !important; }

/* ========== paddingTop ========== */
.pdt0{ padding-top:0 !important; }
.pdt01{padding-top:1px !important; }
.pdt02{padding-top:2px !important; }
.pdt03{padding-top:3px !important; }
.pdt05{padding-top:5px !important; }
.pdt10{padding-top:10px !important; }
.pdt15{padding-top:15px !important; }
.pdt20{padding-top:20px !important; }

/* ========== paddingTop&BottomParcent ========== */
.pdtb0p{ padding-top:0%!important; padding-bottom:0%!important; }
.pdtb01p{padding-top:1%!important; padding-bottom:1%!important;}
.pdtb02p{padding-top:2%!important; padding-bottom:2%!important;}
.pdtb03p{padding-top:3%!important; padding-bottom:3%!important;}
.pdtb05p{padding-top:5%!important; padding-bottom:5%!important;}
.pdtb10p{padding-top:10%!important; padding-bottom:10%!important;}
.pdtb15p{padding-top:15%!important; padding-bottom:15%!important;}
.pdtb20p{padding-top:20%!important; padding-bottom:20%!important;}
.pdtb30p{padding-top:30%!important; padding-bottom:30%!important;}
.pdtb40p{padding-top:40%!important; padding-bottom:40%!important;}
.pdtb50p{padding-top:50%!important; padding-bottom:50%!important;}
.pdtb60p{padding-top:60%!important; padding-bottom:60%!important;}
.pdtb70p{padding-top:70%!important; padding-bottom:70%!important;}
.pdtb80p{padding-top:80%!important; padding-bottom:80%!important;}
.pdtb90p{padding-top:90%!important; padding-bottom:90%!important;}
.pdtb100p{padding-top:100%!important; padding-bottom:100%!important;}

/* ========== paddingTop&BottomParcent ========== */
.pdtb0{ padding-top:0px!important; padding-bottom:0px!important; }
.pdtb0x{padding-top:1px!important; padding-bottom:1px!important;}
.pdtb02{padding-top:2px!important; padding-bottom:2px!important;}
.pdtb03{padding-top:3px!important; padding-bottom:3px!important;}
.pdtb05{padding-top:5px!important; padding-bottom:5px!important;}
.pdtb10{padding-top:10px!important; padding-bottom:10px!important;}
.pdtb15{padding-top:15px!important; padding-bottom:15px!important;}
.pdtb20{padding-top:20px!important; padding-bottom:20px!important;}
.pdtb30{padding-top:30px!important; padding-bottom:30px!important;}
.pdtb40{padding-top:40px!important; padding-bottom:40px!important;}
.pdtb50{padding-top:50px!important; padding-bottom:50px!important;}
.pdtb60{padding-top:60px!important; padding-bottom:60px!important;}
.pdtb70{padding-top:70px!important; padding-bottom:70px!important;}
.pdtb80{padding-top:80px!important; padding-bottom:80px!important;}
.pdtb90{padding-top:90px!important; padding-bottom:90px!important;}
.pdtb100{padding-top:100px!important; padding-bottom:100px!important;}

/* ========== padding setting ========== */
.pdset_A{padding:30px !important;}
/* 480px */
@media only screen and (max-width: 30em) {
.pdset_A{padding:10px !important;}
}

/* ========== txt-align ========== */
.txt_left{text-align:left !important;}
.txt_center{text-align:center !important;}
.txt_right{text-align:right !important;}
.txt_just{text-align:justify !important;}

/* ========== txt-align setting ========== */
.taset_A{text-align:center !important;}
/* 480px */
@media only screen and (max-width: 30em) {
.taset_A{text-align:left!important;}
}

/* ========== width ========== */
.wd100{width: 100%!important;}
.wd33{width: 33.33%!important;}

/* =========== border =========== */
.boder1{ border:1px solid #AA8E76 !important;}
.boder2{ border:1px solid #a98f76 !important;}

/* ============================■■共通CLASS■■============================ */



/* ======================parts====================== */

/* 1400px */
@media only screen and (max-width: 87.5em) {
}
/* 1200px */
@media only screen and (max-width: 75em) {
}
/* 1024px */
@media only screen and (max-width: 64em) {
}
/* 960px */
@media only screen and (max-width: 60em) {
}
/* 768px */
@media only screen and (max-width: 48em) {
}
/* 720px */
@media only screen and (max-width: 45em) {
}
/* 600px */
@media only screen and (max-width: 37.5em) {
}
/* 480px */
@media only screen and (max-width: 30em) {
}
/* 320px */
@media only screen and (max-width: 20em) {
}