@charset "utf-8";
/*---hambugermenu---*/
.navi_title {
    background: #666;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    padding: 20px;
    position: relative;
    /*width: 924px;*/
    overflow: hidden;
}
.navi_title span {
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    right: 20px;
    top: 30px;
}

.mod_headerbar_in_nav_category dl dt {
    background-color: #3e3e3e;
    color: #ffffff;
    font-size: 115%;
    line-height: 1.3;
    font-weight: bold;
    padding: 12px 0 6px 25px;
}

.mod_headerbar_in_nav_category{
	border-bottom:1px solid #6f6e6e;
}
/* common
-----------------------------------------*/

.pcOnly {
    display: block !important;
}

.spOnly {
    display: none !important;
}

@media screen and (max-width: 640px) {

    .pcOnly {
        display: none !important;
    }

    .spOnly {
        display: block !important;
    }

}
/* ex_clearfix
-----------------------------------------*/ 
.ex_clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* mod_wide_section
-----------------------------------------*/ 
.mod_wide_section{
  margin: 0 auto;
  width: 1200px;
  line-height: 1.6;
  font-size: 1.13em;
}

.mod_wide_section img {
	max-width: 100%;
	height: auto;
}
	
@media screen and (max-width: 1024px) { 
  .mod_wide_section{
    width:1024px;
  }
}

@media screen and (max-width: 640px) {
  .mod_wide_section{
    width:auto;
  }
}

/* mod_section
-----------------------------------------*/ 
.mod_section{
  margin: 0 auto;
  width: 967px;
  line-height: 1.6;
  font-size: 1.13em;
}

.mod_section img {
	max-width: 100%;
	height: auto;
	}
@media screen and (max-width: 640px) {
  .mod_section{
    width:auto;
  }
.section-inner {
	margin: 0 2.60416%;
	}
}

/* anchor ----------------------- */
.anchor {
	margin-top: -80px!important;
	padding-top: 80px!important;
	}

.btn_sec_exlarge{
	width: 600px;
}

@media screen and (max-width: 640px) {
.btn_sec_exlarge{
	width: auto;
}
}

/*-------------------------
   lead_wrapper
-------------------------*/

.lead_wrapper{
	padding: 3em 0 3em;
}
.lead_wrapper p{
	text-align: center;
	font-size: 1.25em;
	margin-bottom: 2em;
}
@media screen and (max-width: 640px) {
.lead_wrapper p{
	text-align: left;
	font-size: 4.2vw;
}
}
/*-------------------------
   feature_wrapper
-------------------------*/

.feature_wrapper{
	padding: 3em 0 3em;
	background: #fcf5e8;
}
.feature_wrapper p.copy{
	text-align: center;
	font-size: 1.25em;
	margin-bottom: 2em;
}

.feature_wrapper h2 {
	position: relative;
	padding: 0.2rem;
	text-align: center;
	margin-bottom: 2em;
	font-size: 175%;
	font-weight: bold;
}

.feature_wrapper h2:before {
	position: absolute;
	bottom: -10px;
	left: calc(50% - 30px);
	width: 60px;
	height: 5px;
	content: '';
	border-radius: 3px;
	background: #000;
}

.feature_wrapper h2 span{
	font-size: 63%;
	font-weight: bold;
	background: #f9b502;
	color: #FFF;
	padding: 0.6em 1em 0.4em 2.6em;
	border-radius: 40px;
	display: inline-block;
	margin-bottom: 1em;
	position: relative;
}

.feature_wrapper h2 span:before{
	display: block;
	position: absolute;
	left: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #FFF;
	content: " \f0eb";
	font-family: FontAwesome;
	font-size: 125%;
	font-weight: normal;
}
@media screen and (max-width: 640px) {
.feature_wrapper h2 {
	font-size: 6vw;
}
.feature_wrapper p.copy{
	text-align: left;
	font-size: 4.2vw;
}
}
/*-------------------------
   feature_column
-------------------------*/
.feature_column{
    display : flex;
    flex-wrap : wrap;
    justify-content:space-between;
}

.feature_column::after{
    content:"";
    display: block;
    width: 31%;
}

.feature_column .column{
    width: 31%;
}

.feature_column .column h3{
	text-align: center;
	margin-bottom: 0.4em;
	font-weight: bold;
	font-size: 108%;
	color: #f08201;
}

.feature_column .column h4{
	text-align: center;
	margin-bottom: 0.4em;
	font-weight: bold;
	font-size: 100%;
	margin-top: 0.8em;
}

.feature_column .column p{
	text-align: left;
	font-size: 88%;
	margin-top: 0.4em;
}

@media screen and (max-width: 640px) {
.feature_column::after{
    width: 100%;
}

.feature_column .column{
    width: 100%;
	margin-bottom: 2em;
}
.feature_column .column h3{
	font-size: 4.6vw;
}
.feature_column .column p{
	font-size: 4vw;
}
}

/*-------------------------
   link_wrapper
-------------------------*/

.link_wrapper{
	padding: 3em 0 3em;
	background: #e2e2e2;
}

.link_wrapper h2 {
	position: relative;
	padding: 0.2rem;
	text-align: center;
	margin-bottom: 2em;
	font-size: 175%;
	font-weight: bold;
}

.link_wrapper h2:before {
	position: absolute;
	bottom: -10px;
	left: calc(50% - 30px);
	width: 60px;
	height: 5px;
	content: '';
	border-radius: 3px;
	background: #000;
}


@media screen and (max-width: 640px) {
.link_wrapper h2 {
	font-size: 6vw;
}
.link_wrapper ul li{
	width: 48%!important;
}
}

/*-------------------------
   link_column
-------------------------*/
.link_column{
    display : flex;
    flex-wrap : wrap;
    justify-content:space-between;
}

.link_column::after{
    content:"";
    display: block;
    width: 31%;
}

.link_column .column{
    width: 31%;
	margin-bottom: 1em;
	text-align: center;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	position: relative;
}

.link_column .column a{
	text-decoration: none;
	color: #000;
	background: #FFF;
	padding: 1em 0;
	display: flex;
    justify-content: center;
    align-items: center;
}

.link_column .column a small{
	font-size: 88%;
	font-weight: normal;
	line-height: 1.4;
	display: block;
}

.link_column .column a:after{
	display: block;
	position: absolute;
	right: 16px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #666;
	content: " \f107";
	font-family: FontAwesome;
	font-size: 150%;
  transition: all .4s ease;
}
.link_column .column a:hover:after{
	top: 70%;
}
.photo-zoom{
	position:relative;
	display:block;
	}

.photo-zoom:after{
	display:block;
	position:absolute;
	content: " \f00e";
	font-family: FontAwesome;
	color:#000;
	right:10px;
	bottom:5px;
	z-index:1;
	font-size:150%;
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.photo-zoom img{
  transition-duration: 0.3s;
}
.photo-zoom:hover img{
  opacity: 0.8;
  transition-duration: 0.3s;
}
@media screen and (max-width: 640px) {
.link_column::after{
    width: 100%;
}

.link_column .column{
    width: 48%;
}

.photo-zoom:after{
	right:1vw;
	top:22vw;
}
}

/*-------------------------
   site_wrapper
-------------------------*/

.site_wrapper{
	margin: 0 0 4em;;
}

.site_wrapper h3{
	text-align: center;
	background: #575757;
	color: #FFF;
	padding: 1em 0;
	font-size: 175%;
	font-weight: bold;
	line-height: 1.4;
}

.site_wrapper h3 span{
	font-size: 88%;
	font-weight: bold;
}

.site_wrapper h4{
	margin: 2em 0;
	font-size: 125%;
	line-height: 1.4;
}

.site_wrapper h4 span{
	font-size: 88%;
	font-weight: bold;
	background: #f9b502;
	color: #FFF;
	padding: 0.6em 1em 0.4em 2.6em;
	border-radius: 20px;
	display: inline-block;
	margin-bottom: 1em;
	position: relative;
}

.site_wrapper h4 span:before{
	display: block;
	position: absolute;
	left: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #FFF;
	content: " \f0eb";
	font-family: FontAwesome;
	font-size: 125%;
	font-weight: normal;
}

@media screen and (max-width: 640px) {
.site_wrapper h3{
	font-size: 5vw;
}
.site_wrapper h3 span{
	font-size: 4vw;
	display: block;
}
.site_wrapper h4{
	font-size: 4.2vw;
}
}

/*-------------------------
   photo_two_column
-------------------------*/
.photo_two_column,
.photo_half_column{
    display : flex;
    flex-wrap : wrap;
    justify-content:space-between;
}

.photo_two_column::after,
.photo_half_column::after{
    content:"";
    display: block;
    width: 48%;
}

.photo_two_column .column{
    width: 48%;
	margin-bottom: 2em;
}

.photo_half_column .column{
    width: 50%;
	margin-bottom: 2em;
}

.photo_two_column .column,
.photo_half_column .column{
	text-decoration: none;
	color: #000;
}

.photo_two_column .column dl,
.photo_half_column .column dl {
	display: flex;
	flex-wrap: wrap;
	font-size: 83%;
	margin-top: 0.4em;
	line-height: 1.8;
}
.photo_two_column .column dl dt,
.photo_half_column .column dl dt {
	width: 24%;
}
.photo_two_column .column dl dd,
.photo_half_column .column dl dd {
	width: 76%;
}

.photo_two_column .column dl dd a:after,
.photo_half_column .column dl dd a:after{
	display: inline-block;
	color: #666;
	content: " \f105";
	font-family: FontAwesome;
	padding: 0 6px;
}

.photo_two_column .column p,
.photo_half_column .column p{
	font-size: 83%;
	margin-top: 0.4em;
}

.photo_two_column .column p a:after,
.photo_half_column .column p a:after{
}

@media screen and (max-width: 640px) {
.photo_two_column .column dl,
.photo_half_column .column dl {
flex-flow: column;
}
.photo_two_column .column dl dt,
.photo_half_column .column dl dt {
  width: 100%;
}
.photo_two_column .column dl dd,
.photo_half_column .column dl dd {
  width: 100%;
}
.photo_two_column .column dl,
.photo_two_column .column p,
.photo_half_column .column dl,
.photo_half_column .column p{
	font-size: 2.8vw;
}
}

/*-------------------------
   two_column
-------------------------*/
.two_column{
    display : flex;
    flex-wrap : wrap;
    justify-content:space-between;
}

.two_column::after{
    content:"";
    display: block;
    width: 50%;
}

.two_column .column{
    width: 50%;
}

.two_column .column p{
	font-size: 93%;
	margin-top: 0.4em;
	font-weight: bold;
}

/*-------------------------
   two_one_column
-------------------------*/
.two_one_column{
    display : flex;
    flex-wrap : wrap;
    justify-content:space-between;
	margin-bottom: 2em;
}

.two_one_column::after{
    content:"";
    display: block;
    width: 48%;
}

.two_one_column .column{
    width: 48%;
}

.two_one_column .column p{
	margin-top: 0.4em;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
.two_one_column::after{
    width: 100%;
}

.two_one_column .column{
    width: 90vw;
	margin: 0 auto 1em;
}
.two_one_column .column img{
    width: 90vw;
	margin: 0 auto;
}
}

/*-------------------------
   three_column
-------------------------*/
.three_column{
    display : flex;
    flex-wrap : wrap;
    justify-content:space-between;
}

.three_column::after{
    content:"";
    display: block;
    width: 32%;
}

.three_column .column{
    width: 32%;
}

@media screen and (max-width: 640px) {
.three_column::after{
    width: 100%;
}

.three_column .column{
    width: 80vw;
	margin: 0 auto 1em;
}
.three_column .column img{
    width: 80vw;
	margin: 0 auto;
}
}

/* ---------------------------------------------------------
hidden_box
----------------------------------------------------------*/

.hidden_box {
	margin: 20px 0 0 0;
	padding: 0;
}
.hidden_box label {
	background: #FFF;
	cursor : pointer;
	transition: .5s;
	font-size: 87%;
	padding: 4px 10px 2px;
	background: #e5e5e5;
}
.hidden_box label:after {
	display: inline-block;
	content: '\f067';
	font-family: 'FontAwesome';
	padding-left: 10px;
	transition: 0.2s;
}

.hidden_box label:hover {
	opacity: .8;
	-webkit-opacity: .8;
	-moz-opacity: .8;
	filter: alpha(opacity=80);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=80)"; /* IE 8 */
}

.hidden_box input:checked + label:after {
	content: '\f068';
	font-family: 'FontAwesome';
}
.hidden_box input {
	display: none;
}
.hidden_box .hidden_show {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
	text-align: left;
}
.hidden_box input:checked + label + .hidden_show {
	padding: 0 0;
	height: auto;
	opacity: 1;
}
 @media only screen and (max-device-width: 1280px) and (max-width: 640px) {
.hidden_box {
	margin: 1em 0 2em;
}
}

/* btn ----------------------- */
.l-btn {
	width: 200px;
	margin: 0 0 0 auto; 
}
.l-btn a {
	display: block;
	position: relative;
	background-color: #e5e5e5;
	color: #000;
	font-weight: bold;
	font-size: 90%;
	vertical-align: middle;
	text-align: center;
	line-height: 1.6;
	padding: 10px 16px 10px 10px;
	text-decoration: none;
	border-radius: 30px;
}

@media screen and (max-width: 640px) {
	
.s-btn {
	width: 60vw;
}
}