@charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

/*全体の設定
---------------------------------------------------------------------------*/
html {
-moz-text-size-adjust:none;
-webkit-text-size-adjust:100%;
overflow-x: hidden;
overflow-y:scroll;
}
body{
font-size: 16px;
	font-family:  'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #333;
	background: #fff;
	font-style: normal;line-height: 1.9;
}
.clearfix:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
overflow:hidden;
}

/* ------------------------------------- */
/*	 リンク
/* ------------------------------------- */
a{
	color: #e95514;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
a:hover, .active{
  text-decoration: underline;
}
a:active, a:focus,input:active, input:focus{outline:0;}

/*img*/
a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha( opacity=80 )";}
img {
vertical-align:middle;border-style:none;border:0;-webkit-backface-visibility: hidden;
width: 100%;
height: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
img a {
border: 0;
}

/*p*/
p {
  overflow-wrap:break-word}

/*回りこみ解除*/
.clear {
clear:both;
}
a img,
ol li img,
li img,
ul li img {/*上揃え*/
vertical-align: top;
text-align:center;
border-style:none;
}
img {
vertical-align: middle;
border: none;
max-width: 100%;
height: auto;
-webkit-backface-visibility: hidden; 
backface-visibility: hidden;
}
/*img Chromeのみ*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
img {image-rendering: -webkit-optimize-contrast;}
}

/* container
---------------------------------------------------- */
.container {
padding: 0 6%;
box-sizing:border-box;
width:100%;
}
@media screen and (min-width: 768px) {
.container {
margin: 0 auto;
}}
@media screen and (min-width: 1024px) {
.container{
width:1000px;
padding: 0;
}}

/*背景
---------------------------------------------------- */
.bg_white{
margin: 60px 0
}

.bg_gold {
position: relative;
 z-index: 0;
margin: auto;
padding: 50px 10px 50px 0;
background: url(../img/en/bg_gold.jpg) repeat; 
width:100%;
}

/*inner
---------------------------------------------------- */
.inner {
margin: 50px 0
}
.inner2 {
padding: 0;
    margin-bottom: 60px;
}

/*ページ内リンクずれ
---------------------------------------------------------------------------*/
html {
scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

:target {
  scroll-margin-top: var(--headerHeight, 200px); /* ヘッダーの高さ分の余白を確保 */
}
/* 等分
---------------------------------------------------- */
.boxA:after{content: "";
display: block;
clear: both}
@media screen and (min-width: 768px) {
.box2{float: left;width: 47%;}
.box3{float: right;width: 47%;}
.boxB{float: left;width: 35%;}
.boxC{float: right;width: 60%;}
}
@media (max-width:767px){
.box2,.boxB{margin-bottom: 5%}
}

/* ボックス*/
.box_nuri {
padding: 1.5em 2em;
margin: 2em 0;
background: #f5f5f5;/*背景色*/
}
.box_nuri p,
.box_waku p{
margin: 0; 
padding: 0;
}
.box_waku {
padding: 2em;
margin: 0 0 3em 0;
border: 2px solid #e95514;
border-radius: 10px;

}


/*見出し
---------------------------------------------------- */
.midasi {
color: #e95514;
font-size: 1.3em;
line-height: 1.6em;
font-weight: normal;
padding: 0 0 20px 0
}
.midasi_point {
color: #333;
font-size: 1.5em;
line-height: 1.6em;
font-weight: normal;
padding: 0
}

.fukidashi {
  position: relative;
  width: 100%;
  padding: 15px 0;
  color: #ffffff;
  background-color: #e95514;
	margin: 0 auto 30px auto;
	font-size: 1.3em;
line-height: 1.6em;
text-align: center;
font-weight: normal;
}
.fukidashi.space{
margin-top: 50px
}


.midasi:after,
.midasi_point:after,
.fukidashi:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

@media only screen and (min-width: 768px){
.midasi_point {
  font-size: 2.5em;
}
.fukidashi {
  font-size: 1.5em;
}
}


/*header
---------------------------------------------------- */
.header_box {
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}


/* バッジ */
.badge	{width: 150px;
	height: auto;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}

.pickup	{position: relative}

.badge	{
position: absolute;
	bottom: -50px;
	left: -50px}

.badge_top {
position: absolute;
top: 5%;
left: 5%;
color: #333;
font-size: 1.5em;
line-height: 1.4em;
font-weight: normal;

text-shadow:0 0 10px #fff,0 0 10px #fff, 
0 0 10px #fff, 0 0 10px #fff,
0 0 10px #fff, 0 0 10px #fff
}
@media only screen and (min-width: 768px){
.badge_top {
top: 8%;
left: 3%;
font-size: 2em;
line-height: 1.5em;
}
}

@media only screen and (min-width: 980px){
.header_box {
max-width: 1024px;
margin-bottom: 0
}
.badge	{
width: 290px;
bottom: -100px;
left: -100px}
.badge_top {
top: 50px;
left: 0;
font-size: 2.5em;
line-height: 1.6em;
}
}


/*message
---------------------------------------------------- */
.message_box {
width: 100%;
margin: 40px auto;
box-sizing:border-box;
}
.message_box h2,
 #footer h2{
text-align: center;
color: #e95514;
font-size: 2.5em;
line-height: 1.6em;
font-weight: normal;
padding: 0 0 30px 0
}
@media (max-width:979px){
.message_box h2,
 #footer h2{
font-size: 1.5em;
line-height: 1.6em;
}
}
@media only screen and (min-width: 980px){
.message_box {
width: 720px;
}
#background{
    width: 100%;
    background-image:
        url(../img/en/kumo_right.jpg),
        url(../img/en/kumo_left.jpg);
    background-size:
        200px,
        200px;
    background-position:
        0 20%,
        100% 80%;
    background-repeat:
        no-repeat,
        no-repeat;
}
}
@media only screen and (min-width: 1500px){
#background{
    background-size:
        300px,
        300px;
}
}

/*table
---------------------------------------------------- */
table {
	border-collapse: collapse;
	margin: 0;
	border-color: #fff;
	border-style: solid;
	border-width: 0;
	width:100%
}
table td {
	font-size: 80%;
	line-height: 160%;
	border: 2px solid #fff;
	padding: 10px 5px;
}

table td img {
	margin: 0 0 10px 0;
/* IE 6 */
margin-bottom:0px;
}
@media screen and (min-width: 768px) {
table td {
	font-size: 100%;
	line-height: 170%;
	padding: 15px 0;
}
}

/* banner -------------------- */

#banner_box {
	width: 100%;
	height: auto;
	margin-top: 30px;
	z-index: 1
}
ul.bana-img {
display: flex;
width: 100%;
}
ul.bana-img li img {
mix-blend-mode: multiply;
height: auto;
}
ul.bana-img li a:hover img {
opacity: 0.7;
transition: 0.7s;
}

@media screen and (min-width: 767px) {
ul.bana-img li{
flex: 1;
margin-right: 10px;
}
ul.bana-img li:last-child {
margin-right: 0;
}
}
@media screen and (max-width: 767px) {
ul.bana-img {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul.bana-img li{
width:47%;
height:auto;
margin-right: 3%;
margin-bottom: 3%;
}
ul.bana-img li:nth-child(2n) {
margin-right: 0;
}
}

/* 左右交互 -------------------- */
.flex-item,
.flex-item2{
  display: flex;
  width: auto;
	margin-bottom: 60px
}
.item_img img{
	 width: 100%;
	 height: 350px;
  object-fit: cover;
}
.item1 img,
.item2 img{
  width: 280px;
	height: auto
}
.item1,
.item2{
  text-align: center
}
.item_en{
  text-align: left
}

.item1 h3,
.item2 h3,
.item_en h3{
	font-size: 200%;
	font-weight: normal;
	margin: 0 auto;
	text-align: center;
	padding: 10px 0 15px 0;
	letter-spacing:.1em;
}
.item1 h3.t_01 {
color: #e95514;
}
.item2 h3.t_02 {
color: #e95514;
}
.item1 h3.t_03 {
color: #22ab38;
}
.item1 h3.t_04,
.item2 h3.t_04 {
color: #e73278;
}
.item1 h3.t_05,
.item2 h3.t_05 {
color: #910782;
}


@media screen and (min-width: 768px) {
.flex-item2{
flex-direction: row-reverse;
}
.item1 {
  flex: 0 0 45%;
	margin:0 3%
}
.item2 {
  flex: 0 0 45%;
	margin:0 3%
}
.item_img {
  flex: 1;
}
.item1 img,
.item2 img{
  width: 350px;
}
}
@media screen and (min-width: 980px) {

.item1 {
  flex: 0 0 30%;
	margin:0 5% 0 10%
}
.item2 {
  flex: 0 0 30%;
	margin:0 10% 0 5%
}
}
@media screen and (max-width: 767px) {
  .flex-item,
	.flex-item2{
    flex-direction: column;
    align-items: center;
  }
  .flex-item2:nth-child(odd) {
    flex-direction: column;
  }
.item1,
.item2{
  flex:auto;
	margin: 20px 0;
	padding: 0 6%
}
.item_img {
  padding: 0;
}
.item_img img{
	 width: 100%;
	 height: auto;
	 border-radius: 0;
}
.item1 h3,
.item2 h3 {
	padding: 10px 0;
	letter-spacing:.1em;
}
}



/*footer
---------------------------------------------------- */
#footer{
width:100%;
clear: both;
padding: 0;
margin: 60px auto;
box-sizing: border-box;
}
#footer p {
	font-size:100%;
	padding: 0;
	margin: 0;
font-weight: normal;
text-align: center
}
@media screen and (max-width: 767px) {
#footer{
width:100%;
padding: 0 6%;
box-sizing: border-box
}
#footer p {
text-align: left
}
#footer p br {
display: none;
}
}


/*read-more
---------------------------------------------------------------------------*/
.btn {
margin: 20px auto;
width: 450px
}
.btn_read_more {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #e95514;
transition: 0.5s;
text-align: center;
color: #fff;
  background-color: #e95514;
	box-shadow: 0 9px #a33b0e;
	
font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
	padding: 1rem 0;
	position: relative;
	box-sizing: border-box;
}
.btn_read_more:hover {
  margin-top: 9px;
  color: #fff;
  background: #fc6301;
  box-shadow: 0 0 #a33b0e;
	text-decoration: none;
	transform: translateY(5px);
}

.btn_read_more:after{
  content:"";
  position:absolute;
  top:0;
  bottom:.1em;
  right:5%;
  margin:auto;
  width: .3em;
  height: .3em;
  border-top: .05em solid #fff;
  border-right: .05em solid #fff;
  transform: rotate(45deg);
  transition:.3s;
}
@media screen and (max-width: 767px) {
.btn {
width: 100%
}
}

/*	4つのポイントリスト
/* ------------------------------------- */
li.s_list_item{
  list-style: none;
}
li.s_list_item a{
  text-decoration: none;
	color: #333;
}
li.s_list_item a:hover {
color: #e95514;
transition: 0.5s;
}

.s_list_item {
  display:flex;
	padding: 24px 0;
  border-bottom: 1px solid #333
}

.s_list_item img {
  margin: 0 20px 0 0;
	width: 40px;
	height: 40px;
}
.s_list_detail{
font-size: 1em;
line-height: 1.3em;
}
.s_list_name{
  font-size: 1.3em;
	line-height: 1.5em;
	margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
.s_list_item {
padding: 20px 0;
}
}


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

　 ページトップへ戻る

--------------------------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #e95514;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #e95514;
    border-right: 3px solid #e95514;
    transform: translateY(20%) rotate(-45deg);
}


.pagetop:hover{
opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
	}
	

/*言語切替
---------------------------------------------------------------------------*/
.langChenge {
height: 30px;
width: 80px;
position: fixed;
right: 30px;
top: 30px;
background: #fff;
border: solid 1px #e95514;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
font-size: 90%;
line-height: 30px;
color: #e95514
}
.langChenge:hover{
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
background: #e95514;
color: #fff;
text-decoration: none
}
@media screen and (max-width: 767px) {
.langChenge {
width: 70px;
right: 10px;
top: 10px;
font-size: 80%;
line-height: 20px
}
}
	
/*youtube
---------------------------------------------------------------------------*/
.youtube {
position: relative;
padding-bottom: 56.25%; /* 16:9のアスペクト比 */
height: 0;
overflow: hidden;
}

.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*img_box
---------------------------------------------------- */
.img_box {
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 50px
}
@media only screen and (min-width: 980px){
.img_box {
max-width: 1000px;
}}