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

/*全体の設定
---------------------------------------------------------------------------*/
.main{
	width: auto;
	height: 120px;
}
body{
	margin: 0px;
	padding-top: 10px;
	padding-left: 50px;
	padding-right: 50px;
	color: #333;
	font-size: 16px;
	line-height: 1;	
}

p {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	font-weight: normal;
}

img {
	border: none;
    max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.mainimage{
	width: 63%;
	display: block;
	margin: auto;
	margin-bottom: 30px;
	margin-top: 10px;
}

.flex {
  display: flex;
}

.flex .text {
  margin-right: 90px;
}

.flex .picture{
	margin-top: 10px;
	padding: 0;
	margin-left: 10px;
}

.picture{
	width: 15vw;	
}

.h10 {
  border-bottom: solid 3px black;
  display: inline-block;
  color:#eb6100;
  padding: 0;
}

.h10 span{
	display: inline-block;
}

.h10:first-letter{
  font-size: 150%;
  color: #F07700;
}

.mar-01{
	margin-left: 150px;
}

ul {list-style-type: none;}
.h11 {
  border-bottom: solid 3px black;
  display: inline-block;
  color:#eb6100;
  margin: 10px;
}
.h11 span{
	display: inline-block;
}
.h11:first-letter{
  font-size: 150%;
  color: #F07700;
}
.h31{
  color: #eb6100;
  text-align: right;
  margin-top: 10px;
}
.h31 span{
	display: inline-block;
}

.access{
	margin-top: 30px;
	width: 70%;
	margin: 0 auto;
	position: relative;
}
.accessmain{
	font-size: 2.5vw;
    text-align: center;
}
.text{
	text-align: center;
}
.h21 {
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

.h21 span {
	position: relative;
	z-index: 2;
}

.h21::before {
	content: attr(data-en);
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(224,66,114,0.2);
	font-size: 4vw;
	font-style: italic;
}

.h21::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%) rotate(30deg);
	width: 1px;
	height: 40px;
	background-color: rgba(224,66,114,1);
}

.accessimage{
	margin-top: 50px;
}
.sample02 {
margin : 0 auto 40px;
width : 100%;
font-size : 24px;
text-align : center;
overflow : hidden;
}
.sample02 ul{
margin:0;
display : inline-block;
padding-left: 100%;
white-space : nowrap;
line-height : 1em;
animation : scrollSample02 25s linear infinite;
}
.sample02 ul li{
display:inline;
margin:0 100px 0 0;
}
.sample02 ul li:nth-child(1){
font-weight:bold;
}
.sample02 ul li:nth-child(2){
color:#F00;
}
.sample02 ul li:nth-child(3){
font-style:italic;
}
.sample02 ul li:last-child{
color:#F90;
margin:0;
}
@keyframes scrollSample02{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #333;
	transition: 0.2s;
}
a:hover {
	color: #666;
	text-decoration: none;
}

#menu-btn-check {
    display: none;
}

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffe9a7;
  opacity: 0.4;
  z-index: -1;
}
.Wavy {
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffe9a7 20px ), repeating-linear-gradient( #ffc10755, #ffc107 );
}

    button:hover{cursor: pointer}
    button {
	  margin-left: 50px;
      background: transparent; outline: none;
      position: relative;
      border: 2px solid #111;
      padding: 15px 50px;
      overflow: hidden;
	  background-color: #FFF8C1;
	  box-shadow: 0 0 8px gray;	
	  text-decoration: none;
    }

    /*button:before (attr data-hover)*/
    button:hover:before{opacity: 1; transform: translate(0,0);}
    button:before{
      content: attr(data-hover);
      position: absolute;
      top: 0.5em; left: 0;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 3px;
      font-weight: 800;
      font-size: 1.8vw;
      opacity: 0;
      transform: translate(-100%,0);
      transition: all .3s ease-in-out;
	  text-decoration: none;
    }
      /*button div (button text before hover)*/
      button:hover div{opacity: 0; transform: translate(100%,0)}
      button div{
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 1000;
        font-size: 2vw;
        transition: all .3s ease-in-out;
		text-decoration: none;
      }



/*画面幅1001px以上の設定
---------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1001px){
/*メインメニューのブロック
---------------------------------------------------------------------------*/
.float{
	float: left;
	width: 35%;
	display: inline-block;
}

#menubar {
	position: relative;z-index: 10;
	text-align: center;
	background: #ede4cd;
	border-top: 5px solid #907b6e;
	border-bottom: 5px solid #907b6e;
	color: #666;
	height: 85px;
	box-shadow: 0 0 3px #999;
}
	
#menubar2 {
	width: 60%;
	float: left;
	margin-left: 40px;
	position: relative;z-index: 10;
	text-align: center;
	background: #ede4cd;
	color: #666;
	border-top: 3px solid #907b6e;
	border-bottom: 3px solid #907b6e;
	height: 65px;
	box-shadow: 0 0 3px #999;
}
	

#menubar ul li {
	float: left;
	width: 16.6%;
	font-size: 18px;
}

#menubar2 ul li {
	float: left;
	width: 16.6%;
	font-size: 1vw;
}
	

#menubar ul li a {
	text-decoration: none;display: block;
	height: 75px;
	padding-top: 10px;
}

#menubar2 ul li a {
	text-decoration: none;display: block;
	height: 55px;
	padding-top: 10px;
}
	

#menubar ul li a:hover {
	color: #d4a500;	
}
	
#menubar2 ul li a:hover {
	color: #d4a500;	
}
	

#menubar-s, #menubar-s2 {display: none;}

#hamburger-menu {display: none;}

#menubar a.cursor-default {
	cursor: default;
	color: #333;
}

#menubar ul li span {
	display: block;
	font-size: 0.5vw;
	color: #564936;
	letter-spacing: 0.2em;
	opacity: 80%;
}

#menubar2 ul li span {
	display: block;
	font-size: 0.5vw;
	color: #564936;
	opacity: 80%;
}
	

.menu-content{
		display: none;
}
	
.Box1{
	width: 90%;
	margin: 0 auto;
}

.Box2{
	margin: 0 auto;
	padding: 1em;
 	width: 50%;
 	background-color: #FFF5EE;
 	box-shadow: 0 0 5px 1px #ccc;
}

.Box3{
	font-size: 0.8vw;
	width: 100%;
	border-bottom: solid 2px;
}

.Box4{
	font-size: 1vw;
	width: auto;
	height: 6vh;
}

.Box5{
	float: left;
	margin-left: 5%;
	width: 55%;
	padding: 1em;
 	background-color: #FFF5EE;
 	box-shadow: 0 0 5px 1px #ccc;
}

.Box6{
	margin: 10px;
	padding: 5px;
	border-bottom: dashed 1px;
}

.Box7{
	width: 100%;
	height: 20%;
	padding: 1em;
	background-color: none;
}

.Box8{
	padding: 1em;
	display: flex;
	justify-content: space-evenly;
}
.Box9{
	width: 25%;
	float: left;
	margin-left: 20%;
	padding: 1em;
	background-color: none;
}

.Box10{
	width: 15%;
	float: left;
	margin-left: 4%;
	padding: 1em;
	background-color: none;
}

.graph1{
	width: 52%;
	height: 80px;
	margin: 0 auto;
	text-align: center;
	background: #FFF5EE;
}
.graph2{
		display: none;
}
	
}

/*ドロップダウンメニュー用
------------------------------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar ul.ddmenu {
	position:absolute;visibility: hidden;z-index: 10;
	left: 0px;
	width: 94%;
	padding: 50px 3%;
	background: #333;	/*背景色。古いブラウザ用。*/
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態のこと。*/
	text-align: center;	/*テキストをセンタリング*/
	border-bottom: 1px solid #fff;	/*境界が見辛いので、下線の設定。*/
}
/*ドロップダウンメニューの出現アニメーション*/
#menubar li:hover ul.ddmenu {
	animation-name: opa1;		/*keyframes.cssで使う@keyframesの指定*/
	animation-fill-mode: both;
	animation-duration: 0.8S;	/*アニメーションを実行する時間。「s」は秒の事。*/
	animation-delay: 0.1s;		/*出現するタイミング（秒後）*/
}
/*メニュー１個あたりの設定*/
#menubar ul.ddmenu li {
	float: none;
	width: auto;
	display: inline-block;
	font-size: 85%;	/*文字サイズ*/
}
#menubar ul.ddmenu li a {
	height: auto;
	padding: 20px;	/*メニューテキスト同士の余白*/
	color: #fff;	/*文字色*/
	opacity: 0.7;	/*透明度。70%色がついた状態。*/
}
/*マウスオン時*/
#menubar ul.ddmenu li a:hover {
	opacity: 1;		/*透明度。色が100%出た状態。*/
}


/*画面幅1000px以下の設定
---------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 2vw;	

}

.home header {
	border: none;
}

.float{
	float: left;
	width: 100%;
	display: inline-block;
}
.Box2{
	margin: 0 auto;
	padding: 1em;
 	width: 80%;
 	background-color: #FFF5EE;
 	box-shadow: 0 0 5px 1px #ccc;
}
	.Box2 span{
		display: inline-block;
	}
.Box4{
	font-size: 1.8vh;
	line-height: 150%;
	width: auto;
	height: 10vh;
}

.graph1{
	display: none;
}
.graph2{
	width: 85%;
	height: 80px;
	margin: 0 auto;
	text-align: center;
	background: #FFF5EE;
}
/*３本バーアイコン設定
---------------------------------------------------------------------------*/


.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color:#FFE69F;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 5vw;
    box-sizing: border-box;
    color:#eb6100;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
	
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 80;
    background-color: #FFCC5E;
    transition: all 0.5s;
}


#menu-btn-check:checked ~ .menu-content {
    left: 0;
}

#menubar {display: none;}
	
#menubar2 {display: none;}

.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 10vw;
    width: 10vw;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color:#FFCC5E;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
	
}



/*画面幅480px以下の設定
---------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 5vw;
}

}