﻿@charset "UTF-8";
/* CSS Document */

body {margin:0;padding:0;font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;font-size: 62.5%;line-height:200%;color:#333;background:#fff;overflow-x: hidden;-webkit-text-size-adjust: 100%;}
ol,ul,li {list-style:none;margin:0;padding:0;}
dl,dt,dd {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;margin:0;padding:0;}
p {margin:0;padding:0;}
a { overflow: hidden; color:#f51925;text-decoration: underline;border:none;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
a:hover,a:active { opacity:.7;border:none;outline:none;}

h1 {font-weight:normal;}
h2 {font-weight:normal;}
h3 {font-weight:normal;}
h4 {font-weight:normal;}
img {max-width: 100%;width:auto;height: auto;display:block;}

	img{
	  touch-callout:none;
	  user-select:none;
	  -webkit-touch-callout:none;
	  -webkit-user-select:none;
	  -moz-touch-callout:none;
	  -moz-user-select:none;
	}

header:after,
article:after,
section:after,
div:after,
ul:after {
  content: "";
  display: block;
  clear: both;
}

.pc {display:none;}
.sp {display:block;}

#wrap {width: 100%;height:auto;margin:0 auto;}

#header {background:url(../images/bg.png);padding:0;}
#header:before , #header:after {content:"";background:url(../images/header_line_sp.png) no-repeat 0 0;background-size: cover;width:100%;height:5px;display:block;}
.header_in {padding:5% 5%;position:relative;max-width:480px;margin:0 auto;}
.header_in h1 {width:90%;margin:0 auto;}
.header_in .comment {border:3px solid #f51925;padding:0.5em; border-radius:10px;margin-top:1em;}
.header_in .comment img {width:75%;}
.header_in .illust {width:25%;position:absolute;right:0;top:55%;}

.contents_wrap h2 {padding:3%;color:#f7fa24;font-family: 'Noto Sans Japanese', sans-serif;font-weight:700;font-size:2em;text-align:center;line-height:1.4;}
.contents_wrap h2 span {color:#fff;display:block;}
.contents_wrap h2 span.box {font-size:.8em;line-height:1.3;margin-bottom:.5em;}

.contents_wrap.entry01 h2 {background:#1da3c6;border-top:5px solid #03689a;}
.contents_wrap.entry02 h2 {background:#0abeb6;border-top:5px solid #038c83;}
.contents_wrap.entry03 h2 {background:#ee303a;border-top:5px solid #cd0509;}

.contents_wrap .kikan {font-family: 'Noto Sans Japanese', sans-serif;font-weight:700;font-size:1.7em;text-align:center;line-height:1.4;margin:1.5em 0 0;color: #080808;}
.contents_wrap .kikan span {display:block;}
.contents_wrap .kikan span.sub {font-weight:normal;font-size:.8em;margin-top:.5em;}

.contents_wrap .area {padding:5%;}
.contents_wrap .area.sub {padding-top:0;}

.contents_wrap.entry01 .comment1 {border:3px solid #f51925;padding:0.5em; border-radius:10px;margin-top:1em;}
.contents_wrap.entry01 .comment1 img {width:75%;}

.contents_wrap.entry02 h3 {background:#080808;color:#fff;text-align:center;font-size:1.5em;padding:.4em 0;margin-bottom:1em;}
.contents_wrap.entry02 ul {text-align:center;letter-spacing:.4em;}
.contents_wrap.entry02 li {width:42%;margin:3%;display:inline-block; vertical-align:top;letter-spacing:normal;font-size:1.3em;}
.contents_wrap.entry02 li div {margin-bottom:.3em;}
.contents_wrap.entry02 .area_in:nth-child(n+2) {padding-top:8%;}
.contents_wrap.entry02 .area p {font-size:1.4em;line-height:1.8;margin-bottom:1em;}
.contents_wrap.entry02 .area strong {color:#0abeb6;display:block;}

.contents_wrap.entry03 .sticker_img {width:70%;max-width:300px;margin:0 auto;border:1px solid #eee;}
.contents_wrap.entry03 ul {margin:3em 0;}
.contents_wrap.entry03 li {list-style:disc;margin-left:15px;margin-bottom:.5em;font-size:1.4em;}


@media screen and (min-width:375px) {
.contents_wrap h2 {font-size:2.2em;}
.contents_wrap .kikan {font-size:1.9em;}
}
@media screen and (min-width:414px) {
.contents_wrap h2 {font-size:2.3em;}
.contents_wrap .kikan {font-size:2em;}
}
@media screen and (min-width:568px) {
.header_in {padding:2em 5%;}
.contents_wrap h2 span.box span {display: inline;}
.contents_wrap h2 span.box span:after {content:" ";}
.contents_wrap.entry02 li {width:28%;margin:2%;font-size:1.4em;}
}
@media screen and (min-width:667px) {
.contents_wrap {text-align:center;}
.contents_wrap h2 br {display:none;}
.contents_wrap h2 {font-size:2.4em;}
.contents_wrap .kikan {font-size:2.2em;}
.contents_wrap .kikan span:first-child {display: inline;}
.contents_wrap .kikan span:first-child:before {content:"：";}

.contents_wrap.entry01 li , .contents_wrap.entry03 li {list-style:none;margin-left:0;}
.contents_wrap.entry01 li:before , .contents_wrap.entry03 li:before {content:"●";}
}
@media screen and (min-width:768px) {
.pc {display:block;}
.sp {display:none;}

.header_in {padding: 3em 2%;max-width: inherit;}
.header_in h1 {width: 80%;margin: 0 auto;}
.header_in .illust {width: 15%;top: 58%;}
.header_in .comment {margin-top: 3em;}
.header_in .comment img {margin:0 auto;}

#main {padding: 3%;}
.contents_wrap {border: solid #ccc;border-width:0 1px 1px 1px;margin-bottom: 3%;}
.contents_wrap.entry01 {border-color:#1da3c6;}
.contents_wrap.entry02 {border-color:#0abeb6;}
.contents_wrap.entry03 {border-color:#ee303a;}

.contents_wrap h2 {font-size: 2.6em;padding: 1em;}
.contents_wrap h2 span.box {font-size: .9em;line-height: 1.3;margin-bottom: .2em;}
}

@media screen and (min-width:1024px) {
.header_in h1 {width: 70%;}
.header_in .illust {width: 170px;top: 45%;}
.contents_wrap h2 {font-size: 3.2em;   }
.contents_wrap .kikan {font-size: 2.8em;}
.contents_wrap.entry01 li, .contents_wrap.entry03 li {font-size:1.5em;}
.contents_wrap.entry02 h3 {font-size: 1.8em;padding: .5em 1em;}
.contents_wrap.entry02 .area p {font-size: 1.5em;}
.contents_wrap .kikan span.sub {font-size: .6em;}
}
@media screen and (min-width:1025px) {
.contents_wrap.entry02 li {width: 18%;margin: 2% .5%;font-size: 1.5em;}
.contents_wrap.entry02 li div {margin-bottom: .8em;}
}
@media screen and (min-width:1280px) {
.header_in {padding: 100px 0;max-width: 1200px;}
.header_in h1 {width: 66%;}
.header_in .comment img {width: 68%;}
.header_in .illust {width: 170px;top: 48%;}
#main {padding: 3% 0;max-width: 1200px;margin: 0 auto;}
.contents_wrap {border-width:0 2px 2px 2px;}
.contents_wrap h2 {font-size: 3.4em;}
.contents_wrap .kikan {font-size: 3em;}
.contents_wrap .area {padding: 4%;}
.contents_wrap.entry02 .area_in:nth-child(n+2) {padding-top: 3%;}



} 

@media only screen
    and (min-device-width:320px)
    and (max-device-width:1024px){
}


