/*Design by DREW*/

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@500&family=Playfair+Display:ital,wght@1,500&display=swap');

@font-face{
 font-family: 源ノ明朝;
 src: url(../../../font/SourceHanSerifJP_Regular.eot) format("eot"),
 url(../../../font/SourceHanSerifJP_Regular.woff) format("woff"),
 url(../../../font/SourceHanSerifJP_Regular.ttf) format("truetype");
}

body{
 margin:0;
 padding:0;
 outline:none;
 font-family: 'Playfair Display', 'Kaisei Decol', serif;
 text-align:center;
 font-size:14px;
 line-height:2;
 background:#ffcdda;
 color:#24140e;
}

::-webkit-scrollbar{
 width: 12px;
 }

::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
}

::-webkit-scrollbar-thumb{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::selection{
 background: #13b5b1; color: #fef9fb;
}

::-moz-selection{
 background: #13b5b1; color: #fef9fb;
}

/* トップに戻るボタン */
#pageTop {
  position: fixed;
  bottom: 0px;
  right: 10px;
}

#pageTop i {
  padding-top: 3px;
  padding-right: 5px;
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 5px 0 0 5px;
  border-radius: 30px;
  width: 25px;
  height: 25px;
  background-color: #fe0068;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

img{
 border:0;
}

br{
 letter-spacing:0;
}

p{
 margin:0 0 30px;
 padding:0;
}

a{
 color:#24140e;
 text-decoration:none;
 background:#ff86a6;
}

a:hover{
 background:none;
}

h2{
 font-weight:normal;
 font-size:12px;
 margin:0 0 10px;
 padding:0 0 0 30px;
 background:url(../img/pr_l.png) -67px center no-repeat;
 min-height:18px;
 height:auto !important;
 height:18px;
 color:#fe0068;
}

.footer{
 text-align:left;
}

@media only screen and (min-width:1024px){
body{
 background:#ffcdda url(../img/logo.png) no-repeat 25px -3px fixed;
}

#contents{
 position:relative;
 overflow:hidden;
 zoom:1;
 width:800px;
 margin:0 auto 50px 200px;
 padding:50px 0 0;
}

.logo{
 display:none;
}

.main{
 display:inline;
 float:right;
 position:relative;
 overflow:hidden;
 zoom:1;
 width:800px;
}

.main div{
 display:inline;
 float:left;
 width:365px;
 text-align:left;
 margin:0 10px 30px 0;
}

.main div p{
 padding:0 0 10px 20px;
 background:url(../img/line.gif) 0 0 repeat-y;
}
}


@media only screen and (max-width:1023px) and (min-width:768px){
#contents{
 position:relative;
 overflow:hidden;
 zoom:1;
 width:740px;
 margin:0 auto 10px;
 padding:30px 0 0;
}

.logo{
 align:center;
 margin:0 auto 30px;
 padding:0;
}

.main{
 display:inline;
 float:center;
 position:relative;
 overflow:hidden;
 zoom:1;
 width:740px;
 margin:10px auto 0;
}

.main div{
 display:inline;
 float:left;
 width:350px;
 text-align:left;
 margin:0 10px 20px;
}

.main div p{
 padding:0 0 0 20px;
 background:url(../img/line.gif) 0 0 repeat-y;
}
}


@media only screen and (max-width:767px) and (min-width:600px){
#contents{
 position:relative;
 overflow:hidden;
 zoom:1;
 width:580px;
 margin:0 auto 30px;
 padding:0;
}

.logo{
 align:center;
 margin:20px auto 50px;
 padding:0;
}

.main{
 display:block;
 float:center;
 position:relative;
 overflow:hidden;
 zoom:1;
 width:580px;
}

.main div{
 display:block;
 float:center;
 width:540px;
 text-align:left;
 margin:0 20px 10px;
}

.main div p{
 padding:0 0 0 20px;
 background:url(../img/line.gif) 0 0 repeat-y;
}
}


@media only screen and (max-width:599px){
#contents{
 position:relative;
 overflow:hidden;
 zoom:1;
 width:450px;
 margin:0 auto 10px;
 padding:0;
}

.logo{
 align:center;
 margin:20px auto 50px;
 padding:0;
}

.main{
 display:block;
 float:center;
 position:relative;
 overflow:hidden;
 zoom:1;
 width:450px;
}

.main div{
 display:block;
 float:center;
 width:410px;
 text-align:left;
 margin:0 20px 10px;
}

.main div p{
 padding:0 0 0 20px;
 background:url(../img/line.gif) 0 0 repeat-y;
}
}