/*
Theme Name: marutto_okinawa
Description: まるっと沖縄輸出推進協議会
Author: hiyane
Version: 1.0
*/

@charset "UTF-8";
html{

}

/****************************************
		1. General Setting 
*****************************************/
span.green{color:red; font-weight:bold;}
html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style:none;
	}

body{
	margin: 0px;
	padding: 0px;
	color: #111010;
	font-size: 14px;
	line-height: 1.6;
 letter-spacing: 0.1em;
}
img {
	max-width: 100%;
	height: auto;
}

/*----- リンク -----*/
a:link {
	color: #231815;
	outline: none;
	text-decoration: none;
	-webkit-transition: 0.15s ease-out;
	-moz-transition: 0.15s ease-out;
	-ms-transition: 0.15s ease-out;
	-o-transition: 0.15s ease-out;
	transition: 0.15s ease-out;
}
a:visited {
	color: #231815;
}
a:hover {
	opacity:0.6;
	filter:alpha(opacity=80);
	-ms-filter:"alpha(opacity=80)";
}
a img{
	opacity:1;
	filter:alpha(opacity=100);
	-webkit-transition:opacity 0.2s ease;
	-moz-transition:opacity 0.2s ease;
	-ms-transition:opacity 0.2s ease;
	transition:opacity 0.2s ease;
}
a:hover img{
	opacity:.8;
	filter:alpha(opacity=80);
}


/*----- Clearfix -----*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
		display:inline-block;
		min-height:1%;	/* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


.text{
	line-height:1.7;
}

.pc {display: block;}
.sp {display: none;}

.br-pc { display:block; }
.br-sp { display:none; }

/*----- FLEX BOX -----*/
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.flex-col{
	flex-direction: column;
}
.jstfy-between {
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.jstfy-around {
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content:space-around;
}
.jstfy-center {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.jstfy-flex-end {
	-webkit-box-pack: flex-end;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: flex-end;
	justify-content: flex-end;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}
.flex-direction-column {
	flex-direction: column;
}
.flex-direction-column-reverse {
	flex-direction: column-reverse;
}
.align-items-center {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.align-items-end {
	-webkit-box-align: flex-end;
	-webkit-align-items: flex-end;
	-ms-flex-align: flex-end;
	align-items: flex-end;
}
.lineH_A{
	line-height:1.6;
}

#outer h2{}

#outer {
	background-color: #fff;
	margin:20px auto 0;
	width:100%;
	max-width: 1200px;
	line-height:2.2;
	font-size:14px;
}

#contentOne{
	width:80%;
	margin:40px auto 0;
}

body.home #contentOne{
	margin:0 auto 0;
}
#header {
	height:80px;
	padding:7px 0 0;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
#content {
/*	float: left;*/
	width: 66%;
	box-sizing: border-box;
	margin:0 auto 20px;
	line-height:2;
}
#content .post{
	margin-top:5%;
}
.secRap.marginBottom{
	margin-bottom:30px;
}
.secRap .text{
	margin:15px 0 0 56px;
	letter-spacing:0;
}
.small {
	font-size: 12px;
	font-style: italic;
}
.inner {
	margin:0 auto;
	padding:0 0 20px;
	box-sizing: border-box;
}
aside {
	font-size: 15px;
	width: 27%;
/*	float: right;*/
	padding:0;
	box-sizing: border-box;
}
.right-title {
	margin: 0;
	padding: 10px 10px 10px 20px;
	font-weight: bold;
	background-color: #F6F3ED;
	color: #333;
/*	border-top: 1px solid #C8C8C8;
	border-right: 1px solid #C8C8C8;
	border-left: 1px solid #C8C8C8;
	border-radius: 4px 4px 0 0;*/
}
.link {
	margin: 0 0 10px 0;
	padding: 10px;
/*	border: 1px solid #c7c7c7;
	border-radius: 0 0 4px 4px;*/
}
.link a {
	font-weight: normal;
	color: #003366;
	text-decoration: none;
}
.link a:hover {
	text-decoration: underline;
}

.link li {
	list-style: none;
	margin-bottom: 4px;
}
footer {
	width: 100%;
	background:#f39800;
	text-align: center;
	clear: both;
	padding: 10px 0;
	color:#fff;
}
#footer h4{
	font-size:120%;
}
#footer .copyright{
	font-size:90%;
	margin-top:20px;
}

/* ---- header ----*/
.headNavi{
	width:1100px;
	height:75px;
	max-width:100%;
	margin:0 auto;
	position:relative;
}
.headNavi h1{
/*	align-self: flex-end; */
	font-size:162%;
	letter-spacing:0.2em;
}
.titleImg{
	width: 100%;
	height: 250px;
	text-align: center;
	background:#d8d8d8;
	position:relative;
}
.titleImg.headAbout{
	background:url(./img/common/head_img_about.png) no-repeat;
	background-size:cover;
}
.titleImg.headMenber{
	background:url(./img/common/head_img_member.jpg) no-repeat;
	background-size:cover;
}
.titleImg.headProducts{
	background:url(./img/common/head_img_products.jpg) no-repeat;
	background-size:cover;
}
.titleImg.headNews{
	background:url(./img/common/head_img_news.jpg) no-repeat;
	background-size:cover;
}
.titleImg .innerH2{
	width:70%;
	margin:0 auto;
	text-align:left;
	letter-spacing:0.3em;
	font-size:100%;
}
.titleImg .innerH2 span{
	display:inline-block;
	background:#ffffff85;
	padding:2px 10px;
}

.titleImg.headMenber .innerH2 span,
.titleImg.headProducts .innerH2 span,
.titleImg.headNews .innerH2 span{}

.titleImg .innerH2 p{
	font-size:80%;
	font-weight:normal;
	letter-spacing:normal;
}
.titleImg .innerH2 h2{
	font-size:120%;
	width:1100px;
	margin:0 auto;
}
/* ----------- 新着リスト ------------- */
.newList{
	width:80%;
	margin:15px auto;
}
.newList dl{
	margin:15px auto 0;
}
.newList dt{
	width:15%;
}
.newList dd{
	width:83%;
}
.newList h3 {
	position: relative;
	padding: 0 65px;
	text-align: center;
}

.newList h3:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: #000;
}

.newList h3 span {
	position: relative;
	padding: 0 1em;
	background: #fff;
}

.menu-nav-container .menu{
	width: 100%;
	height: 100%;
	margin-top:15px;
}
#header.fixed .headNavi h1,
#header.fixed .headNavi h1 a{
	color:#fff;
}
#header.fixed .menu-nav-container .menu a{
	color:#fff;
}
#header .language{
	position:absolute;
	right:2%;
	top:5px;
}
#header .language li{
	font-size:95%;
}
#header .language li a{
	color:#f39800;
	text-decoration:underline;
}
#header.default.fixed .language li a{
	color:#fff;
}
#header .language li:last-child{
	padding:0 0 0 25px;
}

.menu-nav-container .menu .menu-item {
	font-size: 16px;
	font-weight: 700;
	position:relative;
	padding-left:10px;
}

.menu-nav-container .menu .menu-item:before{
	position:absolute;
	background: url(./img/common/point01.png) no-repeat;
	left:0;
	top:25%;
	display:inline-block;
	content:'';
	height:16px;
	width:17px;
}

#header.fixed .menu-nav-container .menu .menu-item:before{
	background: url(./img/common/point02.png) no-repeat;
}

.menu-nav-container .menu .menu-item a {
	display: block;
	padding:0 15px;
	text-align: center;
}

.moreBox{
	margin:20px auto;
	line-height:1.5;
}
a.more {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: auto;
	padding: 0.2rem 2rem;
	font-weight: bold;
	border-radius: 32px;
	border: 1px solid #FFA384;
	color: #FFA384;
	position: relative;
 	overflow: hidden;
	transition: all 0.2s ease-in;
}
a.more:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: rgba(0, 0, 0, 0.05);
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

a.more:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #D6AD60;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

a.more:hover {
 color: #FFA384;
 border: 1px solid #D6AD60;
}

a.more:hover:before {
 top: -35%;
 background-color: #D6AD60;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

a.more:hover:after {
 top: -45%;
 background-color: #EFE7BC;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
.box{
	width: calc(90% / 3);
	margin-bottom:3%;
	margin-left:14px;
	margin-right:14px;
}
.box .boxInner{
		position: relative;
		width:98%;
		margin:0 auto;
}
.box .boxInner img{
	display:block;
	width: 100%;
	height: 250px;
	object-fit: cover;
/*	border-radius:67px;*/
}
.box .boxInner a{
		position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		text-indent: 100%; /*テキスト非表示*/
		white-space: nowrap; /*テキスト非表示*/
		overflow: hidden; /*テキスト非表示*/
}
.box .boxInner a:hover{
				opacity:0.6;
				filter: alpha(opacity=60);
				-ms-filter: "alpha( opacity=60 )";
				background: #fff;
}

.inner .topSec{
	margin:0 auto 50px;
/*	padding:0 30px 0;*/
	text-align:center;
}
.inner .topSec h2{}
.inner .topSec p.text{
	font-size:120%;
	width:80%;
	margin:0 auto;
}
.ttl_balloon {
	font-weight: bold;
	color: #333333;
	position: relative;
}
/*.ttl_balloon:before {
	content: '';
	height: 0;
	width: 0;
	border: solid transparent;
	position: absolute;
	left: 30px;
	top: 100%;
	border-color: transparent;
	border-top-color:#f5deb3;
	border-right-color:#f5deb3;
	border-width: 6.5px;
}*/
.box .boxText{
	background-color: #f5deb3;
	text-align:left;
	padding: 0.5em 1em;
	line-height:1.4;
}
.box .boxText.titleTokusan{
/*	position:relative;
	left:25%;
	bottom:50px;
	width:42%;
	text-align:center;*/
	background:#ffebc6;
}
.box .boxText.archiveNews{
	width:59%;
	position:absolute;
	bottom:15px;
	left:17%;
	background:#ffffffcc;
	border-radius:10px;
}
.box .boxText h3{
	font-size:90%;
}
ul.bannerWrap.nextBanner{
	width:80%;
	margin:0 auto;
}
.bannerWrap.nextBanner li{
	width: calc(85% / 3);
}
/*
.bannerWrap.nextBanner li:nth-child(-n+2){
	padding:0 10px 0;
}*/


.bannerRap{
	background:#F6F3ED;
	padding:30px 0;
}

.bannerRap h6 {
	position: relative;
	padding: 0 65px;
	text-align: center;
	width:65%;
	margin:0 auto 15px;
}

.bannerRap h6:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: #E3D9CF;
}

.bannerRap h6 span {
	position: relative;
	padding: 0 3em;
	background: #F6F3ED;
}

.sliderContent,
.sliderContentInfo{
	margin-top:30px;
}
.sliderContent .box,
.sliderContentInfo .box{
	width:unset;
	margin:0 15px 0;
}

.obi01{
	font-size:170% !important;
	text-align:left;
	background:url(./img/common/obi01.png) no-repeat 0 4px;
	padding-left:6%;
	}
.ttl_balloon{
	font-size:110% !important;
	text-align:left;
	background:url(./img/common/obi01.png) no-repeat;
	padding-left:6%;
	background-size:contain;
	}
.languageNavi{
	position: absolute;
}
.languageNavi li{
	padding:0 10px 0;
}
.enPage .languageNavi{
	bottom:10%;
}
.languageNavi li a{
	color:#fff;
}
:not(.enPage) .languageNavi{
	bottom:10%;
}
	@media screen and (max-width: 916px) {
		body {
			font-size: 100%;
			-webkit-text-size-adjust: 100%;
		}
		#header{
			padding:0;
		}
		.titleImg .innerH2 h2 {
			width:unset;
		}
		#outer {
			width: 100%;
		}
		.enPage .page-template-index_en #outer {
			margin-top:0;
		}
		#content {
			float: none;
			width: 100%;
		}
		#contentOne {
			width:90%;
		}
		.enPage #contentOne {
			margin-top:0;
		}
		aside {
			width: 100%;
			float: none;
			padding: 20px 0 0 0;
		}
		header, .inner {
		}
		.link {
			margin: 0 10px 10px;
		}
		.right-title {
			margin: 0 10px;
		}
		footer {
			font-size: 13px;
		}
		a.more {
			width:31%;
		}
		.box {
			margin-left:unset;
			margin-right:unset;
		}
		.box .boxInner img{
			height:110px;
		}
		.text{
			line-height:1.6;
		}
		.pc{display: none;}
		.sp{display: block;}
		.br-pc { display:none; }
		.br-sp { display:block;
				 line-height:0;
		}
		.obi01 {
			font-size:110%;
			background-size:36px;
			padding-left:14%;
		}
		.enPage .obi01 {
			line-height:1.2;
		}
		#outer h2 {
			line-height:1.5;
			font-size:110%;
		}
		.inner .topSec {
			padding: 0 5px 0;
		}
		.inner .topSec p {
			margin-top:10px;
		}
		.newList {
			width: 100%;
		}
		.newList dl {
			line-height: 1.6;
		}
		.newList dt {
			width: 35%;
		}
		.newList dd {
			width: 61%;
		}
		.ttl_balloon {
			line-height: 1.4;
			font-size: 80%;
			background-size:26px;
		}
		.bannerRap{
			margin-top;20px;
		}
		ul.bannerWrap.nextBanner{
			width:100%;
			padding: 0 0;
		}
		.sliderContent .box .boxInner img,
		.sliderContentInfo .box .boxInner img{
			width: 100%;
			height: 17vw;
			object-fit: cover;
		}
		.sliderContent .box .boxInner .ttl_balloon,
		.sliderContentInfo .box .boxInner .ttl_balloon{
			display:none;
		}
		.sliderContent .box,
		.sliderContentInfo .box{
			margin:0 5px 0;
		}
		.headNavi h1 {
			font-size: 100%;
/*			height: 51px;*/
			position: relative;
			top: 8px;
				}
			#header.default.fixed {
				height:unset;
			}
			#header .language {
					left: 4%;
			}
		.secRap .text {
			margin:unset;
			line-height:1.8;
		}
		.titleImg.headMenber{
			background:url(./img/common/head_img_member.jpg) no-repeat 91% 0;
			background-size:cover;
		}
		.titleImg.headProducts {
			background: url(./img/common/head_img_products.jpg) no-repeat 50%;
			background-size:cover;
		}
		.enPage .languageNavi,
		:not(.enPage) .languageNavi{
			bottom: 3%;
		}
	}

	@media screen and (min-width:650px) and ( max-width:1024px) {
		.headNavi h1 {
			left: 4%;
				}
		.enPage .headNavi h1 {
			top:18%;
			line-height:1.2;

				}
		.newList dt {
			width: 23%;
		}
		.newList dd {
			width: 74%;
		}
	}

	@media (max-width: 640px) {
		.box {
			width: calc(100% / 2);
		}
		.headNavi h1 {
			left: 3%;
				}
		.enPage .headNavi h1 {
			left: 4%;
			line-height:1.2;
			top:18%;
				}
		.bannerWrap.nextBanner li{
			width:77%;
			margin:0 auto;
			text-align:center;
		}
		.ttl_balloon {
			padding-left:11%;
		}
		.newsRap .flex-container.titleDate {
			display: unset;
			display: unset;
			display: unset;
		}
		.enPage .newList h3 {
			font-size: 88%;
		}
		.enPage .titleImg .innerH2 span {
			line-height:1.3;
		}
		.moreBox {
			margin: 50px auto 0;
		}
	}