@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　必須
=========================================
*/

menu{background:url(../img_atari/title.png);
	center center no-repeat;
	background-size:auto;
	height:229px;
	text-align:center;
	}

body{
	background-color: #66CCFF;
	}

/* 画面サイズが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: #66CCFF;
	}

*/
/* ここから下がハンバーガーメニューに関する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: #66CCFF;
	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: #66CCFF;
	}
 
 /* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
	}
 }/*@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:#66CCFF;
	}
.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: #6699FF;
	}

/* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
	}

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

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

body{
	width: 100%;
	max-width:770px;
	margin:auto ;
	}
	
h1{
	width:300px;
	height:0;
	margin: 0;
	}

.main_img{
	margin-left: 220px;
	}

a{
	text-decoration: none;
	}


/*
=========================================
  インタビュー部分
=========================================
*/

#main_img{
	text-align: auto;
	min-width: 200px;
	}

#img{
	text-align: center;
	width: 400px;
	border-radius:20px;
	background-color: #00CED1;
	border: solid #FFFF66;
	font-size: 120%;
	color: #ffffff;
	}


/*会話のイメージ、テキスト*/

.flex{
	display: flex;
	align-items:center;
	font-size: 150%;
	width: 100%;
	}

.img_left{
	width: 100px;
	min-width: 100px;
	margin-left:50px;
	flex-shrink: 0;/*flexで画像の縮小を防ぐ*/
	}

.img_right{
	width: 100px;
	min-width: 100px;
	margin-right:0;
	flex-shrink: 0;/*flexで画像の縮小を防ぐ*/
	}


/*テキストにふきだし　グリコ、のぶりん*/

.text_left {
	position: relative;
	display: inline-block;
	margin-left:10px;
	padding: 20px 10px;
	min-width: 120px;
	max-width: 100%;
	color: black;
	font-size: 16px;
	background: #fff;
	border-radius: 15px;
	}

/*吹き出しに三角をつける　ぐりこ、のぶりん*/
.text_left:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0%;
	margin-top: -50px;
	margin-left: -23px;
	border: 15px solid transparent;
	border-right: 15px solid #fff;
	}

.text_left p {
	margin: 0;
	padding: 0;
	}

/*テキストにふきだし　なつみ*/

.text_right {
	position: relative;
	display: inline-block;
	margin-left: 300px;
	margin-right: 10px;
	padding: 20px 20px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #FFFFCC;
	border-radius: 15px;
	}

/*吹き出しに三角をつける　なつみ*/

.text_right:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	margin-top: -55px;
	margin-left: 0px;
	border: 15px solid transparent;
	border-left: 15px solid #FFFFCC;
	}

.text_right p {
	margin: 0;
	padding: 0;
	}
/*テキストにふきだし　もぎ*/

.text_right2 {
	position: relative;
	display: inline-block;
	margin-left: 300px;
	margin-right: 10px;
	padding: 20px 20px;
	max-width: 100%;
	color: black;
	font-size: 16px;
	background: #CCFFFF;
	border-radius: 15px;
	}

/*吹き出しに三角をつける　もぎ*/

.text_right2:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	margin-top: -55px;
	margin-left: 0px;
	border: 15px solid transparent;
	border-left: 15px solid #CCFFFF;
	}

.text_right2 p {
	margin: 0;
	padding: 0;
	}


/*会話の間を広げる*/

div{
	margin-bottom: 30px;
	}

h2{
	font-size: 200%;
	margin-top: 50px;
	margin-left: 200px;
	color: ;blue;
	}
	
	
/* 画面サイズが770px以下の時 */
	
@media screen and (max-width:770px) {

h1{
	width:200px;
	height:0;
	margin: 0;
	}

.main_img{
	margin-left: 120px;
	}

#main_img{
	margin-left:50px;
	text-align: auto;
	min-width: 200px;
	}

#img{
	width: 280px;
	border-radius:20px;
	background-color: #00CED1;
	border: solid #FFFF66;
	font-size: 120%;
	color: #ffffff;
	}
	

h2{
	font-size: 150%;
	margin-top: 50px;
	margin-left: 200px;
	color: ;blue;
	}
	

/*グリコ、のぶりんの写真の位置*/

.img_left{
margin-left: 0px;
}

/*テキストにふきだし　グリコ、のぶりん*/
.text_left {
	position: relative;
	display: inline-block;
	margin-left:10px;
	padding: 10px 10px;
	min-width: 120px;
	max-width: 100%;
	color: black;
	font-size: 16px;
	background: #fff;
	border-radius: 15px;
	}

/*吹き出しに三角をつける　ぐりこ、のぶりん*/
.text_left:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0%;
	margin-top: -40px;
	margin-left: -23px;
	border: 15px solid transparent;
	border-right: 15px solid #fff;
	}

.text_left p {
	margin: 0;
	padding: 0;
	}

/*テキストにふきだし　なつみ*/

.text_right {
	position: relative;
	display: inline-block;
	margin-left: 100px;
	margin-right: 10px;
	padding: 20px 20px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #FFFFCC;
	border-radius: 15px;
	}

/*吹き出しに三角をつける　なつみ*/

.text_right:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	margin-top: -55px;
	margin-left: 0px;
	border: 15px solid transparent;
	border-left: 15px solid #FFFFCC;
	}

.text_right p {
	margin: 0;
	padding: 0;
	}
/*テキストにふきだし　もぎ*/

.text_right2 {
	position: relative;
	display: inline-block;
	margin-left: 100px;
	margin-right: 10px;
	padding: 20px 20px;
	max-width: 100%;
	color: black;
	font-size: 16px;
	background: #CCFFFF;
	border-radius: 15px;
	}

/*吹き出しに三角をつける　もぎ*/

.text_right2:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	margin-top: -55px;
	margin-left: 0px;
	border: 15px solid transparent;
	border-left: 15px solid #CCFFFF;
	}

.text_right2 p {
	margin: 0;
	padding: 0;
	}


	}

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

#up {
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: center;
	height: auto;
	transition: transform .2s ease; /* ゆっくり変化させる */
	}
#up:hover {
	transform: scale(1.1); /* 拡大 */
	}



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