@charset "utf-8";
/* CSS Document */


.oc-siteFooter__pageTop {
/* 共通の「ページ先頭」ボタンを非表示にする */
	opacity: 0;
	display: none;
	z-index: -10;
}

/*------------------------------------------------------------------------------

FONT

------------------------------------------------------------------------------*/


@font-face {
    font-family: 'HelveticaNeueCondensedBold';
    src: url('../fonts/HelveticaNeueCondensedBold.woff2') format('woff2');
    src: url('../fonts/HelveticaNeueCondensedBold.woff') format('woff'),
         url('../fonts/HelveticaNeueCondensedBold.ttf') format('truetype'),
         url('../fonts/HelveticaNeueCondensedBold.svg#HelveticaNeue') format('svg'),
         url('../fonts/HelveticaNeueCondensedBold.eot') format('eot');
    font-weight: bold;
    font-style: normal;
}

/*------------------------------------------------------------------------------

共通CSS

------------------------------------------------------------------------------*/
html {
    font-size: 62.5%;
}
body{
  	width: 100%;
  	height: auto;
  	font-size: 16px;
  	font-size: 1.6rem;
	line-height: 1.5;
  font-family: /*'HelveticaNeueCondensedBold',*/"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	background: #f6f6f6;
	color: #FFF;
	text-align: center;
}

img {
	max-width: 100%;
	height: auto;
}

.navSec p,
p.circle_tit,
.h3_nb,
.h3_pw,
p.print_tit,
/*p.sec03_nav_tit,*/
p.table-cell,
.sec06_question span,
.iv_prf,
.sec02_iv_txt,
.special-font {
	font-family: 'HelveticaNeueCondensedBold',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-stretch: condensed;
  /*font-weight: 700;*/
}
h1,
.anser_per,
.anser_count_ttl,
.working_anser_per,
.working_num,
.graph_men,
.graph_women,
.graph_anser_per{
    font-family: "HelveticaNeueCondensedBold", 'Roboto',sans-serif;
	font-stretch: condensed;
    font-weight: 700;
}
.pagerBox_a p,
.pagerBox_b p,
.pagerBox_c p {
  font-family: "HelveticaNeueCondensedBold", 'Areal',sans-serif;
  font-weight: bold;
}
p.sec03_nav_tit {
  /*font-family: 'Roboto',sans-serif;*/
  font-family: 'Helvetica Bold','Areal',sans-serif;
  font-weight: bold;
  /*font-weight: 900;*/
}
.clearfix {
    min-height: 1px;
}
.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
    content: ".";
}
.wrapper{
    width: 100%;
		max-width: 1062px;
    height: auto;
    margin: 0 auto;
 }
.foot_contents img{
	max-width: 100%;
	height: auto;
}

.nofixed{
	display: none;
}

.barlow {
	font-family: 'Barlow Condensed', sans-serif !important;
}

/*------------------------------------------------------------------------------

PC用CSS（幅1050px以上）

------------------------------------------------------------------------------*/

@media print, screen and (min-width: 1062px){
	.spOnly{
		display: none;
	}
	.main_visual{
    	width: 100%;
		height: 100%;
  	}

		.main_bg {
			width: 100%;
			height: 500px;
			background: url('../images/main_bg.jpg') no-repeat;
			background-size: cover;
			background-position: center center;
		}

		.read_copy {
			font-size: 1.4rem;
			text-align: center;
			line-height: 2;
			margin: 20px auto 40px auto;
			color: #000;
		}

		.brand {
			width: 90%;
			max-width: 1062px;
			margin: 70px auto;
		}

		.brand img {
			max-width: 360px;
    	width: 50%;
    	margin: auto;
		}

		.brand span {
			font-size: 1.2rem;
			color: #000 !important;
		}

		.flex_box {
			width: 90%;
			max-width: 1062px;
			margin: 120px auto;
			display: flex;
			justify-content: space-between;
		}

		.flex_image {
			width: 48%;
		}

		.flex_txt {
			width: 48%;
		}

		.flex_txt h2 {
			font-size: 1.8rem;
			font-weight: bold;
			color: #000 !important;
			text-align: left;
		}

		.flex_txt p {
			font-size: 1.4rem;
			color: #000 !important;
			text-align: left;
    line-height: 1.8;
    margin-top: 10px;
		}

		.photo_contents {
			width: 90%;
    max-width: 1062px;
    margin: auto;
		}

		.photo_contents h2 {
			font-size: 4.8rem;
    color: #000;
    font-weight: bold;
		}

		.photo_contents p {
			font-size: 1.8rem;
    color: #000;
    margin: 50px auto 80px auto;
    font-weight: bold;
    line-height: 2;
		}

		.photo_sub_contents {
			width: 90%;
    max-width: 1062px;
    margin: 120px auto;
		}

		.photo_sub_contents h2 {
			font-size: 1.8rem;
    color: #000;
    font-weight: bold;
		text-align: left;
		}

		.photo_sub_contents p {
			font-size: 1.4rem;
    color: #000;
    text-align: left;
		line-height: 1.8;
		margin: 20px auto 120px auto;
		}

		.photo_flex {
			display: flex;
    justify-content: space-between;
    width: 100%;
		}

		.photo_flex img {
			width: 48%;
		}

		.link_btn {
			width: 100%;
    max-width: 1062px;
    margin: 120px auto;
		display: flex;
		justify-content: space-between;
		}

		a.left_btn {
			width: 425px;
		height: 110px;
		box-sizing: border-box;
		font-size: 1.8rem;
		line-height: 2.2;
		text-align: center;
		border: 8px solid #707070;
		padding: 3% 0%;
    color: #707070;
		text-decoration: none;
		}

		a.right_btn {
			width: 425px;
    height: 110px;
    box-sizing: border-box;
    font-size: 1.8rem;
    line-height: 2.2;
    text-align: center;
    border: 8px solid #4c7181;
		padding: 3% 0%;
    color: #4C7182;
    text-decoration: none;
		}

		.left_btn .arrows:before {
    content: '';
    height: 15px;
    width: 15px;
    display: block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    position: absolute;
    top: 45%;
    left: 7%;
		transition: 0.3s;
		}

		a.left_btn:hover .arrows:before {
			left: 5%;
		}

		.right_btn .arrows:before {
    content: '';
    height: 15px;
    width: 15px;
    display: block;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: absolute;
    top: 45%;
    right: 7%;
		transition: 0.3s;
		}

		a.right_btn:hover .arrows:before {
			right: 5%;
		}

		.arrows.left_arrow:before {
    border: 4px solid #707070;
    border-right-width: 0;
    border-top-width: 0;
		}

		.arrows.right_arrow:before {
    border: 4px solid #4c7181;
    border-left-width: 0;
    border-top-width: 0;
		}

		.sf_materials {
			width: 100%;
    max-width: 1062px;
		}

		.sf_materials h2 {
			font-size: 7rem;
    color: #000;
    font-weight: bold;
		}

		.sf_materials p {
			font-size: 1.8rem;
    color: #000;
    margin-top: 10px;
		}

		.brand_btn {
			width: 334px;
			height: 150px;
			display: flex;
    align-items: center;
    justify-content: center;
		position: relative;
		}

		.single_img {
			margin: 50px auto;
		    width: 60%;
		}

		.brand_btn img {
			width: 50%;
		}

		.brand_btn.jp {
			background: url('../images/brand_jp.jpg') no-repeat;
			background-size: contain;
		}

		.brand_btn.uf {
			background: url('../images/brand_ul.jpg') no-repeat;
			background-size: contain;
		}

		.brand_btn.lu {
			background: url('../images/brand_lu.jpg') no-repeat;
			background-size: contain;
		}

		.brand_btn.kv {
			background: url('../images/brand_kv.jpg') no-repeat;
			background-size: contain;
		}

		.brand_btn .arrows:before {
    content: '';
    height: 12px;
    width: 12px;
    display: block;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: absolute;
    top: 44%;
    right: 12%;
		transition: 0.3s;
		}

		a.brand_btn:hover .arrows:before {
			right: 9%;
		}

		a.brand_btn .arrows.right_arrow:before {
    border: 4px solid #FFF;
    border-left-width: 0;
    border-top-width: 0;
		}





  .cmf_logo_wrap {
		position: relative;
    top: 38%;
  }
	.cmf_logo{
		width: 372px;
    	left: 0;
    	right: 0;
    	margin: auto;
	}
	#cmf_back, #cmf_logo_txt{
		display: none;
	}
	.cmf_svg{
		top: 0;
		left: 0;
		width: 372px;
		height: 123px;
	}
	.cmf_svg_back{
		top: 0;
		left: 0;
		width: 372px;
		height: 123px;
		position: absolute;
	}
	.cmf_svg_txt{
		width: 372px;
		position: absolute;
		top: 100%;
		left: 0;
    	right: 0;
		margin: 10px auto;
	}
	.cmf_svg_txt p{
		color: #000;
		font-size: 1.4rem;
		float: left;
    	width: 25%;
	}
	.cmf_svg_txt p:nth-of-type(2){
		width: 50%;
	}
	.mv_sub_txt{
		font-size: 2.0rem;
		position: absolute;
		/*top: 73%;*/
		right: 0;
		left: 0;
		top:145%;
		/*bottom: -100%;*/
		color: #000;
	}

	.scroll{
		width: 50px;
    	margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 5%;
	}
	.scroll p{
		color: #000;
		margin-bottom: 2%;
	}
	.scroll img{
		margin: auto;
	}


	/*-------------- right FIX navi --------------*/
	.right_navi{
		width: 100px;
    	position: fixed;
    	top: 40%;
    	right: 0;
    	z-index: 9999;
	}
	.right_navi a:first-child{
		display: inline-block;
		width: 100px;
		height: 100px;
		background: #914444;
		margin: 15% 0;
		box-shadow:2px 2px 20px 0px rgba(0,0,0,0.25);
	}
	a.navi_action{
		text-decoration: none;
	}
	.right_navi a:first-child:hover {
		background: #5e1a1a;
	}
	.right_navi a:last-child{
		display: inline-block;
		width: 100px;
		height: 100px;
		background: #4c7181;
		box-shadow:2px 2px 20px 0px rgba(0,0,0,0.25);
	}
	.right_navi a:last-child:hover {
		background: #183e4f;
	}
	.right_navi p{
		font-size: 1.2rem;
		color: #FFF;
		padding-top: 20%;
	}
	.arrows.nav_arrow:before{
		border: 2px solid #FFF;
		border-left-width: 0;
    	border-top-width: 0;
	}
	.hvr-sweep-to-bottom:hover .arrows.sec_arrow:before{
		border: 4px solid #000;
		border-right-width: 0;
    	border-top-width: 0;
	}
	/* Forward */
	.hvr-forward {
  		display: inline-block;
  		vertical-align: middle;
  		-webkit-transform: perspective(1px) translateZ(0);
  		transform: perspective(1px) translateZ(0);
  		box-shadow: 0 0 1px transparent;
  		-webkit-transition-duration: 0.3s;
  		transition-duration: 0.3s;
  		-webkit-transition-property: transform;
  		transition-property: transform;
	}
	.navi_action:hover img.hvr-forward,
	.navi_action:focus img.hvr-forward,
	.navi_action:active img.hvr-forward {
  		-webkit-transform: translateX(8px);
  		transform: translateX(8px);
	}
	.sec03_nav_linkpdf a:hover img.hvr-forward,
	.sec03_nav_linkpdf a:focus img.hvr-forward,
	.sec03_nav_linkpdf a:active img.hvr-forward {
  		-webkit-transform: translateX(8px);
  		transform: translateX(8px);
	}
	/*-------------- footer --------------*/
	.foot_contents{
		position: absolute;
    	right: 100px;
    	bottom: 750px;
    	width: 80px;
    	height: 80px;
    	padding: 2%;
	}

	.foot_fixed{
	position: fixed !important;
    bottom: 0 ;
    right: 0 !important;
    z-index: 9998;
    transition: all 1s;
	}

	.foot_padding{
		bottom: 10%;
	}


	/*-------------- navi --------------*/
	#navi{
		width: 100%;
		background: #FFF;
		padding: 10px 0 100px 0;
	}
	.navArea{
		width: 1062px;
		height: auto;
    	margin: 0 auto;
		margin-bottom: 5%;
	}
	h1.sec_tit{
		font-size: 3.2rem;
    	font-weight: 900;
    	text-align: center;
    	margin: 2% 0;
		color: #000 !important;
	}
	.navSec{
		float: left;
		position: relative;
	}
/*	.navSec img{
		margin: 5% auto auto;
    	position: absolute;
    	left: 0;
    	right: 0;
    	bottom: 10%;
	}*/
  .navSec .navImg03_logo {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    width: auto;
    margin-bottom: 10px;
  }
	.navSec p{
		font-weight: 900;
		font-size: 2.2rem;
		color: #FFF;
		text-align: center;
		position: absolute;
    	top: 37%;
    	left: 0;
    	right: 0;
	}
	.navSec span{
		font-size: 1.4rem;
    	color: #FFF;
    	text-align: center;
    	font-weight: normal;
	}
	.navi_arrow {
		position: absolute;
    	top: 85%;
    	margin: auto;
    	left: 0;
    	right: 0;
    	width: 30px;
	}
	.navi_main_txt{
		width: 80%;
/*		display: none;*/
		opacity: 0;
		position: absolute;
		top: 45%;
		left: 0;
		right: 0;
		margin: auto;
  }
	p.catch{
		font-size: 1.4rem;
		color: #000;
		text-align: center;
	}
	p.main_txt{
		font-size: 1.2rem;
		color: #000;
		text-align: left;
		margin-top: 30px;
	}
	.hvr-sweep-to-top:hover .navi_main_txt{
/*		display: inline-block;*/
    -webkit-animation: fadeIn 1s ease 1;
		animation: fadeIn 1s ease 1;
		opacity: 1;
	}
	.navImg01{
		width: 250px;
    	height: 348px;
		background: url(../images/nav_01.jpg) no-repeat top center / 100%;
		margin-bottom: 10px;
	}
	.navImg02{
		width: 250px;
    	height: 348px;
		background: url(../images/nav_02.jpg) no-repeat top center / 100%;
		margin: 0 10px 10px 10px;
	}
	.navImg03{
		width: 510px;
		height: 348px;
		background: url(../images/nav_03.jpg) no-repeat top center / 100%;
		margin-bottom: 10px;
	}
	.navImg04{
		width: 510px;
		height: 348px;
		background: url(../images/nav_04.jpg) no-repeat top center / 100%;

	}
	.navImg05{
		width: 250px;
    	height: 348px;
		background: url(../images/nav_05.jpg) no-repeat top center / 100%;
		margin: 0 10px 10px 10px;
	}
	.navImg06{
		width: 250px;
    	height: 348px;
		background: url(../images/nav_06.jpg) no-repeat top center / 100%;

	}

	.hvr-sweep-to-top {
  		display: inline-block;
  		vertical-align: middle;
  		-webkit-transform: perspective(1px) translateZ(0);
  		transform: perspective(1px) translateZ(0);
  		box-shadow: 0 0 10px rgba(0,0,0,0.4);
  		position: relative;
  		-webkit-transition-property: color;
  		transition-property: color;
  		-webkit-transition-duration: 0.3s;
  		transition-duration: 0.3s;
	}
	.hvr-sweep-to-top:before {
  		content: "";
  		position: absolute;
  		z-index: -1;
  		top: 35%;
  		left: 0;
  		right: 0;
  		bottom: 0;
  		background: #FFF;
  		-webkit-transform: scaleY(0);
  		transform: scaleY(0);
  		-webkit-transform-origin: 50% 100%;
  		transform-origin: 50% 100%;
  		-webkit-transition-property: transform;
  		transition-property: transform;
  		-webkit-transition-duration: 0.3s;
  		transition-duration: 0.3s;
  		-webkit-transition-timing-function: ease-out;
  		transition-timing-function: ease-out;
	}
	.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
  		color: #000;
	}
	.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
  		-webkit-transform: scaleY(1);
  		transform: scaleY(1);
	}
	.hvr-sweep-to-top:hover .arrows.sec_arrow:before{
		border: 4px solid #000;
		border-right-width: 0;
    	border-top-width: 0;

	}
	@keyframes fadeIn {
    	0% {opacity: 0}
    	100% {opacity: 1}
	}

	@-webkit-keyframes fadeIn {
    	0% {opacity: 0}
    	100% {opacity: 1}
	}



}

/*------------------------------------------------------------------------------

SP用CSS（幅640px以内）

------------------------------------------------------------------------------*/

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

	.pcOnly{
		display: none;
	}

	body {
    overflow-x: hidden !important;
	}

	img{
		max-width: 100%;
		height: auto;
	}
	.navi_arrow.arrows:before {
    	content: '';
    	height: 15px;
    	width: 15px;
    	display: block;
    	transform: rotate(-45deg);
    	-webkit-transform: rotate(-45deg);
    	-moz-transform: rotate(-45deg);
    	-o-transform: rotate(-45deg);
    	-ms-transform: rotate(-45deg);
    	position: absolute;
    	top: 40%;
    	right: 0;
    	left: 0;
    	margin: auto;
	}

	.main_visual {
    	width: 100%;
    	height: 100%;
    	min-height: 420px;
	}
	  .cmf_logo_wrap {
		position: relative;
    	top: 30%;
  }
	.cmf_logo {
    	width: 80%;
    	max-width: 420px;
    	/*top: 15%;*/
    	left: 0;
    	right: 0;
    	margin: auto;
	}
	.cmf_svg {
    	top: 0;
    	left: 0;
    	width: 82%;
      height: auto;
      margin: auto 9%;
	}
	.cmf_svg {
    	top: 0;
    	left: 0;
    	width: 82%;
      height: auto;
      margin: auto 9%;
	}
	#cmf_back, #cmf_logo_txt {
    	display: none;
	}
	.cmf_svg_back {
    	top: 0;
    	left: 0;
    	width: 82%;
      height: auto;
      margin: auto 9%;
    	position: absolute;
	}
	.cmf_svg_txt {
    	width: 100%;
    	position: absolute;
    	top: 100%;
    	left: 0;
    	right: 0;
    	margin: 5px auto 10px auto;
	}
	.cmf_svg_txt p {
    	color: #000;
    	font-size: 1rem;
    	float: left;
    	width: 33.3%;
	}
	.mv_sub_txt {
    	font-size: 1.4rem;
    	position: absolute;
    	top: 155%;
    	/*bottom: -50%;*/
    	right: 0;
    	left: 0;
		color: #000;
    	margin: auto;
    	text-shadow: 0 0 4px #fff;
	}
	.scroll {
    	margin: auto;
    	position: absolute;
    	left: 0;
    	right: 0;
    	/*top: 55%;*/
    	top:auto;
    	bottom: 16%;
    	bottom: calc(8% + 30px);
    	bottom: 80px;
    	/*font-weight: bold;*/
	}
	a.hover_action {
    	text-decoration: none;
	}
	.scroll p {
		font-size: 1.4rem;
    	color: #000;
    	margin-bottom: 2%;
	}
	.scroll img {
    	margin: auto;
	}
	.right_navi {
		width: 100%;
    	position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.right_navi a:first-child {
		display: inline-block;
		box-sizing: border-box;
		width: 49%;
		width: calc(50% - 1px);
		background: #914444;
		float: left;
		padding: 12px 0;
		position: relative;
		border-right: 2px solid transparent;
	}
	.right_navi a:last-child {
		display: inline-block;
		box-sizing: border-box;
		width: 49%;
		width: calc(50% - 1px);
		background: #4c7181;
		float: right;
		padding: 12px 0;
		position: relative;
	}
	.right_navi p {
    	font-size: 1.4rem;
    	color: #FFF;
    	float: left;
    	line-height: 2;
    	text-align: center;
    	width: 90%;
	}
	.right_navi img{
		position: absolute;
    	top: 37%;
    	bottom: 0;
    	right: 5%;
	}
	.navi_fixed{
		position: fixed !important;
   		z-index: 2;
    	transition: all 1s;
	}

	/*-------------- footer --------------*/
	.foot_contents{
		position: absolute;
    	right: 2%;
    	bottom: 13%;
    	width: 60px;
    	height: 60px;
    	padding: 2%;
	}

	.foot_fixed{
	position: fixed !important;
    z-index: 9998;
    transition: all 1s;
	}

	.oc-toTopWrap {
    bottom: 80px !important;
	}

	/*-------------- navi --------------*/
	#navi a{
		text-decoration: none !important;
	}
	#navi {
    	width: 100%;
    	background: #FFF;
    	padding: 5% 0 2% 0;
	}
	.navArea {
    	width: 98%;
    	height: auto;
    	margin: 0 auto;
    	margin-bottom: 5%;
	}
	h1.sec_tit {
    	font-size: 3rem;
    	text-align: center;
    	margin: 2% 0;
    	color: #000;
	}
	nav a:nth-of-type(1), nav a:nth-of-type(5){
		display: inline-block;
    	width: 48%;
		margin: 0 2% 4% 0;
    	float: left;
		position: relative;
		clear: left;
	}
	nav a:nth-of-type(2), nav a:nth-of-type(6){
		display: inline-block;
    	width: 48%;
		margin: 0 0 4% 2%;
		float: right;
		position: relative;
		clear: right;
	}
	nav a:nth-of-type(3), nav a:nth-of-type(4){
		display: inline-block;
    	width: 100%;
		margin-bottom: 2%;
		position: relative;
		clear: both;
	}
	.navImg01 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 268 * 100%);
    	background: url(../images/nav_01.jpg) no-repeat top center / cover;

	}
	.navImg02 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 268 * 100%);
    	background: url(../images/nav_02.jpg) no-repeat top center / cover;

	}
	.navImg03 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 526 * 100%);
    	background: url(../images/nav_03.jpg) no-repeat top center / cover;

	}
	.navImg04 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 526 * 100%);
    	background: url(../images/nav_04.jpg) no-repeat top center / cover;

	}
	.navImg05 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 268 * 100%);
    	background: url(../images/nav_05.jpg) no-repeat top center / cover;

	}
	.navImg06 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 268 * 100%);
    	background: url(../images/nav_06.jpg) no-repeat top center / cover;

	}
	.navSec .navImg03_logo {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    width: auto;
    margin-bottom: 10px;
  }
	.navSec p {
    	font-size: 2.2rem;
    	color: #FFF;
    	text-align: center;
    	/*padding-top: 3%;*/
		position: absolute;
		top: 35%;
		left: 0;
		right: 0;
		line-height: 1.2;
	}
	.navSec span {
    	font-size: 1.2rem;
    	color: #FFF;
    	text-align: center;
	}
	.navi_main_txt{
		display: none;
	}
	.navi_arrow {
    	position: absolute;
    	top: 85%;
    	margin: auto;
    	left: 0;
    	right: 0;
    	width: 100%;
	}
	.arrows.sec_arrow:before {
    	border: 4px solid #FFF;
    	border-right-width: 0;
    	border-top-width: 0;
	}

	.main_bg {
		width: 100%;
		height: 400px;
		background: url('../images/main_bg_sp.jpg') no-repeat;
		background-size: cover;
		background-position: center center;
	}

	.brand {
		width: 95%;
    margin: auto;
	}

	.brand img {
		width: 80%;
    margin: auto;
	}

	.brand span {
		font-size: 1.2rem;
    color: #000;
	}

	.read_copy {
		font-size: 1.2rem;
    color: #000;
    margin: 20px auto;
	}

	.flex_box {
		width: 95%;
    margin: 50px auto;
	}

	.flex_txt {
		margin-top: 20px;
	}

	.flex_txt h2 {
		font-size: 1.6rem;
    color: #000;
    font-weight: bold;
    text-align: left;
	}

	.flex_txt p {
		font-size: 1.4rem;
    color: #000;
    text-align: left;
    line-height: 1.5;
    margin-top: 20px;
	}

	.photo_contents {
		width: 95%;
    margin: 50px auto;
	}

	.photo_contents h2 {
		font-size: 3.2rem;
    color: #000;
    font-weight: bold;
	}

	.photo_contents p {
		font-size: 1.4rem;
    color: #000;
    line-height: 1.5;
    margin: 30px auto;
	}

	.photo_sub_contents {
		width: 95%;
    margin: 50px auto;
	}

	.photo_sub_contents h2 {
		font-size: 1.6rem;
		    color: #000;
		    font-weight: bold;
		    text-align: left;
	}

	.photo_sub_contents p {
		font-size: 1.4rem;
    color: #000;
    text-align: left;
    line-height: 1.5;
    margin: 30px auto;
	}

	.photo_flex img {
		margin: 20px auto;
	}

	.link_btn {
		width: 95%;
	margin: 50px auto;
	}

	a.left_btn {
		width: 100%;
		margin: 30px auto;
	box-sizing: border-box;
	font-size: 1.8rem;
	line-height: 2.2;
	text-align: center;
	border: 4px solid #707070;
	padding: 3% 0%;
	color: #707070;
	text-decoration: none;
	display: block;
	position: relative;
	}

	a.right_btn {
		width: 100%;
		margin: 30px auto;
	box-sizing: border-box;
	font-size: 1.8rem;
	line-height: 2.2;
	text-align: center;
	border: 4px solid #4c7181;
	padding: 3% 0%;
	color: #4C7182;
	text-decoration: none;
	display: block;
	position: relative;
	}

	.left_btn .arrows:before {
	content: '';
	height: 10px;
	width: 10px;
	display: block;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	position: absolute;
	top: 38%;
  left: 10%;
	transition: 0.3s;
	}

	.right_btn .arrows:before {
	content: '';
	height: 10px;
	width: 10px;
	display: block;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	position: absolute;
	top: 38%;
  right: 10%;
	transition: 0.3s;
	}

	.arrows.left_arrow:before {
	border: 4px solid #707070;
	border-right-width: 0;
	border-top-width: 0;
	}

	.arrows.right_arrow:before {
	border: 4px solid #4c7181;
	border-left-width: 0;
	border-top-width: 0;
	}

	.sf_materials {
		width: 95%;
	margin: 50px auto;
	}

	.sf_materials h2 {
		font-size: 4rem;
	color: #000;
	font-weight: bold;
	}

	.sf_materials p {
		font-size: 1.6rem;
	color: #000;
	margin-top: 20px;
	}

	.brand_btn {
		width: 100%;
		height: 150px;
		margin: 30px auto;
		display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	}

	.brand_btn img {
		width: 50%;
	}

	.brand_btn.jp {
		background: url('../images/brand_jp.jpg') no-repeat;
		background-size: contain;
	}

	.brand_btn.uf {
		background: url('../images/brand_ul.jpg') no-repeat;
		background-size: contain;
	}

	.brand_btn.lu {
		background: url('../images/brand_lu.jpg') no-repeat;
		background-size: contain;
	}

	.brand_btn.kv {
		background: url('../images/brand_kv.jpg') no-repeat;
		background-size: contain;
	}

	.brand_btn .arrows:before {
	content: '';
	height: 10px;
	width: 10px;
	display: block;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	position: absolute;
	top: 44%;
	right: 12%;
	transition: 0.3s;
	}

	a.brand_btn .arrows.right_arrow:before {
	border: 4px solid #FFF;
	border-left-width: 0;
	border-top-width: 0;
	}

	.single_img {
		margin: 50px auto;
	    width: 90%;
	}


}

/*------------------------------------------------------------------------------

ランドスケープ用CSS（幅641px以上1062px以下）

------------------------------------------------------------------------------*/

@media only screen and (min-width: 641px) and (max-width: 1061px){

	.pcOnly{
		display: none;
	}

	img{
		max-width: 100%;
		height: auto;
	}
	.navi_arrow.arrows:before {
    	content: '';
    	height: 15px;
    	width: 15px;
    	display: block;
    	transform: rotate(-45deg);
    	-webkit-transform: rotate(-45deg);
    	-moz-transform: rotate(-45deg);
    	-o-transform: rotate(-45deg);
    	-ms-transform: rotate(-45deg);
    	position: absolute;
    	top: 40%;
    	right: 0;
    	left: 0;
    	margin: auto;
	}

	.main_visual {
    	width: 100%;
    	height: 100%;
    	min-height: 50%;
    	/*height: 0!important;*/
		/*padding-top: calc(850 / 1303 * 100%);*/
    	background: url(../images/sp/main_visual_sp.jpg) no-repeat center 32% / cover;
		position: relative;
	}
	.wrapper {
		/*min-width: 1000px;*/
	}
	 .cmf_logo_wrap {
		position: absolute;
		width: 100%;
    	top: 20%;
  }
	.cmf_logo {
    	width: 65%;
    	max-width: 420px;
    	/*top: 20%;*/
    	left: 0;
    	right: 0;
    	margin: auto;
		position: relative;
	}
	.cmf_svg {
    	top: 0;
    	left: 0;
    	width: 100%;
	}
	#cmf_back, #cmf_logo_txt {
    	display: none;
	}
	.cmf_svg_back {
    	top: 0;
    	left: 0;
    	width: 100%;
    	position: absolute;
	}
	.cmf_svg_txt {
    	width: 100%;
    	position: absolute;
    	top: 100%;
    	left: 0;
    	right: 0;
    	margin: 10px auto;
	}
	.cmf_svg_txt p {
    	color: #000;
    	font-size: 1.2rem;
    	float: left;
    	width: 33.3%;
	}
	.mv_sub_txt {
    	font-size: 2.2rem;
    	position: absolute;
    	/*top: 60%;*/
    	top: 150%;
    	right: 0;
    	left: 0;
		color: #000;
    	margin: auto;
	}
	.scroll {
    	margin: auto;
    	position: absolute;
    	left: 0;
    	right: 0;
		bottom: 0;
	}
	a.hover_action {
    	text-decoration: none;
	}
	.scroll p {
		font-size: 2.4rem;
    	color: #000;
    	margin-bottom: 2%;
	}
	.scroll img {
    	margin: auto;
	}
	.right_navi{
		width: 100px;
    	position: fixed;
    	top: 20%;
    	right: 0;
    	z-index: 9999;
	}
	.right_navi a:first-child{
		display: inline-block;
		width: 100px;
		height: 100px;
		background: #914444;
		margin: 15% 0;
	}
	a.navi_action{
		text-decoration: none;
	}
	.right_navi a:first-child:hover {
		background: #5e1a1a;
	}
	.right_navi a:last-child{
		display: inline-block;
		width: 100px;
		height: 100px;
		background: #4c7181;
	}
	.right_navi a:last-child:hover {
		background: #183e4f;
	}
	.right_navi p{
		font-size: 1.2rem;
		color: #FFF;
		padding-top: 20%;
	}
	.right_navi img{
		margin: auto;
		margin-top: 15%;
	}
	.navi_fixed{
		position: fixed !important;
   		z-index: 2;
    	transition: all 1s;
	}

	/*-------------- footer --------------*/
	.foot_contents{
		position: absolute;
    	right: 0;
    	bottom: 0;
    	width: 80px;
    	height: 80px;
    	padding: 2%;
	}

	.foot_fixed{
	position: fixed !important;
    z-index: 9998;
    transition: all 1s;
	}

	/*-------------- navi --------------*/
	#navi a{
		text-decoration: none !important;
	}
	#navi {
    	width: 100%;
    	background: #FFF;
    	padding: 5% 0 2% 0;
	}
	.navArea {
    	width: 98%;
    	height: auto;
    	margin: 0 auto;
    	margin-bottom: 5%;
	}
	h1.sec_tit {
    	font-size: 3rem;
    	text-align: center;
    	margin: 2% 0;
    	color: #000;
	}
	nav a:nth-of-type(1), nav a:nth-of-type(5){
		display: inline-block;
    	width: 48%;
		margin: 0 2% 4% 0;
    	float: left;
		position: relative;
		clear: left;
	}
	nav a:nth-of-type(2), nav a:nth-of-type(6){
		display: inline-block;
    	width: 48%;
		margin: 0 0 4% 2%;
		float: right;
		position: relative;
		clear: right;
	}
	nav a:nth-of-type(3), nav a:nth-of-type(4){
		display: inline-block;
    	width: 100%;
		margin-bottom: 2.5%;
		position: relative;
		clear: both;
	}
	.navImg01 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 268 * 100%);
    	background: url(../images/nav_01.jpg) no-repeat top center / cover;

	}
	.navImg02 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 268 * 100%);
    	background: url(../images/nav_02.jpg) no-repeat top center / cover;

	}
	.navImg03 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 526 * 100%);
    	background: url(../images/nav_03.jpg) no-repeat top center / cover;

	}
	.navImg04 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 526 * 100%);
    	background: url(../images/nav_04.jpg) no-repeat top center / cover;

	}
	.navImg05 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 268 * 100%);
    	background: url(../images/nav_05.jpg) no-repeat top center / cover;

	}
	.navImg06 {
    	width: 100%;
    	height: 0;
    	padding-top: calc(366 / 268 * 100%);
    	background: url(../images/nav_06.jpg) no-repeat top center / cover;

	}
  .navSec .navImg03_logo {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    width: auto;
    margin-bottom: 10px;
  }
	.navSec p {
    	font-size: 2.2rem;
    	color: #FFF;
    	text-align: center;
    	padding-top: 3%;
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
	}
	.navSec span {
    	font-size: 1.4rem;
    	color: #FFF;
    	text-align: center;
	}
	.navi_main_txt{
		display: none;
	}
	.navi_arrow {
    	position: absolute;
    	top: 85%;
    	margin: auto;
    	left: 0;
    	right: 0;
    	width: 100%;
	}
	.arrows.sec_arrow:before {
    	border: 4px solid #FFF;
    	border-right-width: 0;
    	border-top-width: 0;
	}

}