/*----------------------------------------------------------
	Styles for body
----------------------------------------------------------*/

body {margin: 0; padding: 0; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;background: url(../images/bg.png) center repeat-y #fddce4 fixed; font-weight: 100;}
body {-webkit-animation: fadeIn 2s ease 0s 1 normal; animation: fadeIn 2s ease 0s 1 normal;}
@-webkit-keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}
@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}}


a:link  { text-decoration: none; color: #c9004c;}  
a:visited { text-decoration: none; color: #c9004c;}  
a:hover { text-decoration: underline;}  
a:active { text-decoration: underline;} 
p {line-height: 1.8; margin-bottom: 2em;}




.contents{
	height: 100%;
	width: 980px;
	margin: 0 auto;
	padding: 20px 0 0;
	background: rgba(256,256,256,0.7);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
	border-top: solid 20px #d77c97;
}
.contents::after {clear: both; }

h1{text-align: center; margin: 0 auto 40px; font-family: 'Noto Serif JP', serif; font-weight: 200; font-size: 36px; line-height: 1.3; color:#c9004c;}
h2{text-align: center; margin: 0 auto 60px; font-family: 'Noto Serif JP', serif; font-weight: 200; font-size: 24px; line-height: 1.7; color:#777;}
.reader{margin-bottom: 100px;}
h3{ font-family: 'Noto Serif JP', serif; font-weight: 400; color:#c9004c; margin: 120px auto 50px; text-align: center;  font-size: 24px; border-bottom: 1px dotted #c9004c; padding-bottom: 20px;}
.logo {text-align: center; margin: 20px auto; }
.logo img {width: 160px; }
.txtarea {width: 900px ; margin: 40px auto; font-size: 16px; line-height: 1.5; }
.credit{font-size: 12px; line-height: 1.2; margin: 5px 20px; text-align: right;}
.cap{font-size: 12px; line-height: 1.2; }
.cleafix {clear: both; line-height: 0;}
.part{font-size: 16px; border-radius: 16px; background-color: #d77c97; border: 2px solid #d77c97; font-family:  Arial, Helvetica, "sans-serif"; color:#fff; padding: 5px 10px; font-weight: bold; margin: 0px 10px; vertical-align: middle; letter-spacing: 2px;}

.cho{color:#ca5290; font-weight: 400; margin-right: 1rem; }
.naka{color:#48a0e4; font-weight: 400; margin-right: 1rem; }
.interview{
	color: #914356;
	font-weight: 400;
}

.gazo1 { margin: 0px 20px 0px; width: 940px;}
.gazo_left {  width: 400px; float: left; margin: 0 20px 10px 0; font-size: 12px; line-height: 1.2; text-align: left; color:#333; }
.gazo_right { width: 400px; float: right; margin: 0 0 0 20px; font-size: 12px; line-height: 1.2; text-align: right; color:#333; }
.gazo_right_tate {width: 250px; float: right; margin: 0 0 0 20px; font-size: 12px; line-height: 1.2;}
.gazo_left_tate { width: 250px; float: left; margin: 0 20px 0 0px; font-size: 12px; line-height: 1.2;}
.gazo_left img {width: 100%; margin-bottom: 5px;}
.gazo_right img {width: 100%; margin-bottom: 5px;}


.gazo_left_big { width: 600px; float: left; margin: 0 20px 0 0; }
.center {text-align: center;}
.mar20 {margin-bottom: 20px;}
.mar40 {margin-bottom: 40px;}
.pad40 {padding-top: 40px;}
.mar5 {margin: 5px;}


/*----------------------------------------------------------
	Styles for button
----------------------------------------------------------*/
.forbtn{text-align: center; margin: 70px 0;}
.button {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
  border-radius: 30px;
  margin: 5px;
cursor : pointer;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button {
  background-color: #d77c97;
  border: 2px solid #d77c97;
  color: #fff;
  line-height: 1.2;
  padding: 10px 20px;
	font-weight: 400;
	margin-bottom: 30px;
}

.button a:link  { text-decoration: none; color: #fff;}  
.button a:visited { text-decoration: none; color: #fff;}  
.button a:hover { text-decoration: none;  border-bottom: none;}  
.button a:active { text-decoration: none;  border-bottom: none;} 

.button:hover {
  background-color: #f0a2b9;
  border-color: #f0a2b9;
  color: #fff;
}
.pc { display: block; }
.sp { display: none; }
#foot { magin:0; padding:20px 0 20px; font-size: 12px; line-height: 1; color: #fff; text-align: center; font-weight:400;  background: #d77c97; width:100%;}


@media screen and (max-width:600px) { 
	.contents{width: 100%;}
	img {max-width: 100%;}
	.txtarea {width: calc(100% - 40px);}
	.gazo1 { margin: 0px 0px 20px; width: 100%;}
	.gazo_left { width: 100%; margin: 0 20px 10px 0; font-size: 14px; line-height: 1.2; text-align: left; }
	.gazo_right { width: 100%; margin: 0 0 10px 20px; font-size: 14px; line-height: 1.2; text-align: right; }
	.gazo_right_tate {width: 50%; margin: 0 0 0 20px; font-size: 14px; line-height: 1.2;}
	.gazo_left_tate { width: 50%; margin: 0 20px 0 0px; font-size: 14px; line-height: 1.2;}
	.gazo_left img {width: 100%; margin-bottom: 5px;}
	.gazo_right img {width: 100%; margin-bottom: 5px;}
	h1{text-align: left; margin: 0 auto 40px; font-family: 'Noto Serif JP', serif; font-weight: 200; font-size: 24px; line-height: 1.3; }
	h2{text-align: left; margin: 0 auto 60px; font-family: 'Noto Serif JP', serif; font-weight: 200; font-size: 20px; line-height: 1.7; color:#777;}
	.reader{margin-bottom: 100px;}
	h3{ font-family: 'Noto Serif JP', serif; font-weight: 400; font-size: 20px;  margin: 100px auto 0px; text-align: left; }
	p {line-height: 1.8; margin-bottom: 2em; font-size: 14px;}
	.pc { display: none; }
	.sp { display: block; }

}