@charset "utf-8";
/*
=======================================
  Reset CSS
=======================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
  margin:0;
  padding:0;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
  display:block;
}

html{
  -webkit-text-size-adjust: 100%;
}

body{
  color: #59220d;
  line-height: 1.5;
  font-size: 14px;
  font-family: sans-serif;
}

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

ul,ol{
  list-style-type: none;
}

table {
  border-collapse: collapse; 
  border-spacing: 0;
}

img, input, select, textarea { 
  vertical-align: middle;
}

a {
  color: #59220d;
  transition: 0.5s;
}

a:hover {
  color: #d53e04;
font-size: 105%;
}

a:hover img {
  opacity: 1;
}

/*
========================================
  Base Layout
=========================================
*/

body{
	width: 100%;
	max-width:770px;
	margin: auto;
	background-color: yellow;
	}

/* 画面サイズが770px以下の時 */
	
@media screen and (max-width:770px) {
.flex_title{
	margin-top: 100px;
	display: flex;
	align-items:flex-end;
	justify-content:space-around;
	}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	background: yellow;
	}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
	}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
	height: 60px;
	width: 60px;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 100;/* 重なり順を一番上にする */
	cursor: pointer;
	}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background: #333;
	transition: 0.5s;
	position: absolute;
	}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
	bottom: 8px;
	}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
	top: 8px;
	}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
	background: rgba(255, 255, 255, 0);
	}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
	bottom: 0;
	transform: rotate(45deg);
	}

#drawer_input:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
	}
  
/* メニューのデザイン*/
.nav_content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%; /* メニューを画面の外に飛ばす */
	z-index: 99;
	background: yellow;
	transition: .5s;
	}

/* メニュー黒ポチを消す */
.nav_list {
	list-style: none;
	font-size: 200%;
	padding: 5%;
	}

.nav a {
	text-decoration: none;
	}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
	left: 150px;/* メニューを画面に入れる */
	}

   .header {
	align-items: center;
	padding: 0 20px;
	background: yellow;
	}
 
 /* 煽りコピーを非表示にする */
 #sub_title{
	display:none
	}
 
 .contents_img{
	min-width:80%;
	min-height: 80%;
	display:block;
	height:auto;		
	margin:auto;
	}

 h3{
	min-width: 77%;
	display:block;
	height:auto;		
	margin:auto;
	}

p{
	font-size:120%;
	}
 }/*@media*/
 

/* 画面サイズが770px以上の時 */

@media screen and (min-width:770px) {
	.flex_title{
	margin-top: 100px;
	display: flex;
	align-items:flex-end;
	justify-content:space-around;
	}

.nav {
	width: 70%;
	margin: auto;
	background:yellow;
	}

.nav ul {
	display: flex;
	justify-content:space-around;
	}

.nav li {
	width: 50%;
	}

.nav a {
	display: block;
	width: 120px;
	margin-bottom: 20px;
	padding: 10px 0;
	color: black;
	font-weight:bold;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	}

.nav a:hover {
	background: #FFCC00;
	}

#sub_title{
	font-size: 120%;
	margin-top:-600px;
	margin-left: 100px;
	writing-mode: vertical-rl;
	color: black;
	}
	
/* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
	}

li:hover {
	transform: scale(0.9); /* 縮小 */
	}

/* コンテンツを３カラムにする*/

.flex1,.flex2{
	display: flex;
	justify-content:space-around;
	}

}/*@media*/
/*
=========================================
  info
=========================================
*/

#info_title{
	font-size: 150%;
	color:#FF0000;
	}

.info{
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 10px;
	background-color: #fff;
	}

.info-list {
	display: flex;
	flex-wrap: wrap;
	}

.info-list dt {
	width: 30%;
	padding: 10px 0;
	border-top: 2px #d8c7a0 dotted;
	}

.info-list dd {
	width: 70%;
	padding: 10px 0;
	border-top: 2px #d8c7a0 dotted;
	}

/*
=========================================
  contents
=========================================
*/

/*コンテンツをホバーで縮小*/

.contents_img{
	width:300px;
	border-radius:20px;
	border: solid #FFFF66;
  	cursor: pointer;
  	max-width: 300px;
  	overflow: hidden;
  	width: 100%;
  	margin-bottom: 0;
	}

.content {
	transition: transform .3s ease; /* ゆっくり変化させる */
	}
.content:hover {
	transform: scale(0.9); /* 縮小 */
	}

#background{
	background:url(../img/background.jpg)
	center center no-repeat;
	background-size:cover;
	height:600px;
	text-align:center;
	}
	
h1{
	width:300px;
	height:0;
	margin: auto;
	margin-bottom: 50px;
	}

#sub_title{
	font-size: 180%;
	margin-top:-600px;
	margin-left: 100px;
	writing-mode: vertical-rl;
	color: black;
	}

h3{
	width: 280px;
	height: 80px;
	padding: 10px;
	margin-top: 0;
	margin-bottom: 20px;
	border-radius:20px;
	background-color: #00CED1;
	border: solid #FFFF66;
	font-size: 120%;
	color: #ffffff;
	}

a{
	text-decoration: none;
	}


/*
=========================================
  slot
=========================================
*/

/* 画面サイズが770px以上の時 */

@media screen and (min-width:770px) {

#slot{
	width: 500px;
	height: 180px;
	border: outset 15px gold;
	background-color: dimgray;
	margin:auto;
	}

button{
	background-color: yellow;
	border:none;
	}

#button{
	text-align: center;
	}

td{
	width:100px; 
	height:150px;
	text-align:center;
	}

/*スロットのボタンをホバーで変化*/
.start {
	height: auto;
	transition: transform .2s ease; /* ゆっくり変化させる */
	}
.start:hover {
	transform: scale(1.1); /* 拡大 */
	}

.stop {
	height: auto;
	transition: transform .2s ease; /* ゆっくり変化させる */
	}
.stop:hover {
	transform: scale(1.1); /* 拡大 */
	}
	}
	

/* 画面サイズが770px以下の時 */
	
@media screen and (max-width:770px) {
#slot{
	width: 300px;
	height: auto;
	border: outset 15px gold;
	background-color: dimgray;
	margin:auto;
	}

button{
	background-color: yellow;
	border:none;
	}

#button{
	text-align: center;
	}

td{
	width:100px; 
	height:150px;
	text-align:center;
	}

/*スロットのボタンをホバーで変化*/
.start {
	width: 150px;
	height: auto;
	transition: transform .2s ease; /* ゆっくり変化させる */
	}
.start:hover {
	transform: scale(1.1); /* 拡大 */
	}

.stop {
	width: 150px;
	height: auto;
	transition: transform .2s ease; /* ゆっくり変化させる */
	}
.stop:hover {
	transform: scale(1.1); /* 拡大 */
	}
	}

/*
=========================================
  footer
=========================================
*/

#up {
	height: auto;
	transition: transform .2s ease; /* ゆっくり変化させる */
	}
#up:hover {
	transform: scale(1.1); /* 拡大 */
	}

#sns_logo{
	display: flex;
	justify-content:space-around;
	}

.sns_insta, .sns_twitter{
	margin-top: 50px;
	width: 10%;
	}

h2{
	margin-top: 50px;
	text-align: center;
	}