/*----------------------------------------------------------
	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 #fbe3e0; }
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: #FF5B5D;}  
a:visited { text-decoration: none; color: #FF5B5D;}  
a:hover { text-decoration: none;}  
a:active { text-decoration: none;} 
p {line-height: 1.8; margin-bottom: 2em;}

.banner{text-align: center; margin-bottom: 40px;}


.contents{ height: 100%; width: 980px; margin: 0 auto; padding: 20px 0 0;  border-left: #af8f52 double 3px; border-right: #af8f52 double 3px; background: rgba(256,256,256,0.7); box-shadow:  0px 0px 10px rgba(0,0,0,0.4); }
.contents::after {clear: both; }

h1{text-align: center; margin: 0 auto;}
.h1image { width: 100px; margin: 20px auto; }
.txtarea {width: 900px ; margin: 40px auto; font-size: 16px; line-height: 1.5; }
.title1 { font-size: 24px; line-height: 1; font-weight: bold; color: #af8f52; margin: 40px 0px 40px 0px; text-align: center;}
.credit{font-size: 12px; line-height: 1.2; margin: 5px 0; text-align: right;}
.title2 { font-size: 20px; line-height: 1; font-weight: bold; color: #FF5B5D; margin: 70px 0px 30px 0px;}
.title3 { font-size: 16px; line-height: 1; font-weight: bold; color: #af8f52; margin: 40px 0px 0px 0px; padding: 0 0 0px 0;}

.coment{ border: 1px solid #566EA1; padding: 20px; background-color: #FFFFee; border-radius:10px; color:#566EA1; margin-bottom: 40px; }
.coment img {height: 80px;}
.coment::after{clear: both;}
.coment p {line-height: 1.8; margin: 0 0 1em;}

.coment2{ border: 1px solid #FF5B5D; padding: 20px; background-color: #FFFFee; border-radius:10px; color:#FF5B5D; margin-bottom: 40px; }
.coment2 img {height: 80px;}
.coment2::after{clear: both;}
.coment2 p {line-height: 1.8; margin: 0 0 1em;}

.sgazp {float: right; margin-left: 20px;}
.sgazp2 {float: left; margin-right: 20px;}

.question {border-bottom: 1px solid #F78688; color: #F78688;}
.ans {color: #566EA1;}
.bold {font-weight: bold;}
.ctitle{font-size: 24px; font-weight: bold;}

.cap{font-size: 12px; line-height: 1.2; }
.cleafix {clear: both; line-height: 0;}


.cho{color:#FF5B5D; font-weight: bold; margin-right: 1rem; }
.cho2{color:#5B90FF; font-weight: bold; margin-right: 1rem; }
.int{
	color: #777777;
	font-weight: bold;
}

.gazo1 { margin: 0px 20px 0px; width: 940px;}
.gazo_left { margin: 0px 0px 0px 0px; width: 400px; float: left; margin: 0 20px 0 0; }
.gazo_right { margin: 0px 0px 0px 0px; width: 400px; float: right; margin: 0 0 0 20px;}
.gazo_right_tate { margin: 0px 0px 0px 0px; width: 250px; float: right; margin: 0 0 0 20px;}
.gazo_left_tate { margin: 0px 0px 0px 0px; width: 250px; float: left; margin: 0 20px 0 0px;}

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


/*----------------------------------------------------------
	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: #FF5B5D;
  border: 2px solid #FF5B5D;
  color: #fff;
  line-height: 1.2;
  padding: 10px 20px;
}

.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: #FE9191;
  border-color: #FE9191;
  color: #fff;
}

#foot { magin:0; padding:20px 0 20px; font-size: 12px; line-height: 1; color: #fff; text-align: center;  background: #af8f52; width:100%;}

.pc { display: block; margin: auto; }
.sp { display: none; }



@media screen and (max-width: 600px) {
body {background: #fff;}
.contents{ height: 100%; width: 100%; margin: 0 auto; padding: 20px 0 0;  border-left: none; border-right: none; background: #fff; box-shadow:none; }
.contents::after {clear: both; }

h1{text-align: center; margin: 0 auto;}
.h1image { width: 100px; margin: 20px auto; }
.txtarea {width:calc(100% - 30px); margin: 40px auto; font-size: 14px; line-height: 1.5; }
.title1 { font-size: 24px; line-height: 1.2; font-weight: bold; color: #af8f52; margin: 40px 0px 40px 0px; text-align: center;}
.credit{font-size: 12px; line-height: 1.2; margin: 5px 0; text-align: right;}
.title2 { font-size: 20px; line-height: 1.2; font-weight: bold; color: #FF5B5D; margin: 70px 0px 30px 0px;}
.title3 { font-size: 16px; line-height: 1.2; font-weight: bold; color: #af8f52; margin: 40px 0px 0px 0px; padding: 0 0 0px 0;}

.coment{ border: 1px solid #566EA1; padding: 20px; background-color: #FFFFee; border-radius:10px; color:#566EA1; margin-bottom: 40px; }
.coment img {height: 80px;}
.coment::after{clear: both;}
.coment p {line-height: 1.8; margin: 0 0 1em;}

.coment2{ border: 1px solid #FF5B5D; padding: 20px; background-color: #FFFFee; border-radius:10px; color:#FF5B5D; margin-bottom: 40px; }
.coment2 img {height: 80px;}
.coment2::after{clear: both;}
.coment2 p {line-height: 1.8; margin: 0 0 1em;}

.sgazp {float: none; margin-left: 0px;}
.sgazp2 {float: none; margin-right: 0px;}

.question {border-bottom: 1px solid #F78688; color: #F78688;}
.ans {color: #566EA1;}
.bold {font-weight: bold;}
.ctitle{font-size: 24px; font-weight: bold;}

.cap{font-size: 12px; line-height: 1.2; }
.cleafix {clear: both; line-height: 0;}


.cho{color:#FF5B5D; font-weight: bold; margin-right: 1rem; }
.cho2{color:#5B90FF; font-weight: bold; margin-right: 1rem; }
.int{
	color: #777777;
	font-weight: bold;
}

.gazo1 { margin: 0; width: 100%;}
.gazo1 img {width: 100%;}
.gazo_left { margin: 0; width: 100%; float: none; margin: 0; }
.gazo_right { margin: 0; width: 100%; float: none; margin: 0;}
.gazo_right_tate { margin: 0; width: 100%; float: none; margin: 0;}
.gazo_left_tate { margin: 0; width: 100%; float: none; margin: 0;}

.gazo_left_big { margin: 0px 0px 0px 0px; width: 100%; float: none; margin: 0; }
.center {text-align: center;}
.center img{width: 100%;}
.mar20 {margin-bottom: 20px;}
.mar40 {margin-bottom: 40px;}
.pad40 {padding-top: 40px;}
	
.banner{text-align: center; margin: 0px 20px 10px;}
.banner img{width: 100%;}


.pc { display: none; }
.sp { display: block; }
}