@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

body{
 font-family:"Noto Sans JP","Arial","ヒラギノ丸ゴ ProN","メイリオ",sans-serif;
}
.mt80{
 margin-top: 80px;
}
/*-------------------------
header
-------------------------*/
header{
 position: sticky;
 top: 0;
 z-index: calc(infinity);
}
.header-inner{
 display: flex;
 justify-content: space-between;
 background-color: #fff;
 box-shadow: 0 3px 10px #808080;
 color:#098693;
 padding: 10px 20px;
 position: sticky;
 top: 0;
}
.logo-box{
 display: flex;
 align-items: center;
}
.logo-box p{
 padding-left: 15px;
}
.header-right{
 display: flex;
 align-items: center;
}
input{
 outline: none;
 color:#111111;
}
.search{
 display: flex;
 border: solid 2px #4b4b4b;
 border-radius: 15px;
 padding: 7px 10px;
 margin-right: 20px;
}
.top-btn{
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 text-align: center;
 align-items: center;
}
.top-btn >li{
 background-color: #fff;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all  0.3s ease;
 margin: 0 10px;
 border: solid 2px #098693;
 border-radius: 17px;
 width: 130px;
}
.top-btn >li:hover{
 background-color: #fef5e6;
}
.top-btn >li >a{
 padding: 7px 13px;
 display: block;
 width: 100%;
}
.top-box01{
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #f7869e;
 padding: 20px 0;
}
.top-box01 p{
 color:#fff;
 font-size: 1.7em;
 line-height: 1.4em;
 letter-spacing: 0.15em;
 padding-right: 40px;
}
.top-btn-tablet,
.top-img-smt,
.top_box_img_smt{
 display: none;
}
/*-------------------------
main
-------------------------*/
#main{
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 padding: 0 3% 60px;
 margin-top: 70px;
}
.h2{
 font-size: 2em;
}
.leftside{
 border-right: solid 1px #afafaf;
 padding-right: 50px;
 width: 18%;
}
.cm{
 position: relative;
}
.leftside div:nth-of-type(2){
 margin: 50px 0 20px;
}
.cm> span{
 position: absolute;
 top: 0;
 left: 0;
 font-size: 0.7em;
 background: #fff;
 opacity: 0.8;
 padding: 1px 2px;
}
.rightside{
 margin-left: 3%;
 width: 82%;
}
div.wrapper{
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 margin-bottom: 75px;
}
div.illust,
div.illust02{
 display: table;
 margin: 40px 30px 0 0;
}
div.illust a,
div.illust02 a{
 background-color: #fff5e6;
 border-radius: 17px;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 width: 250px;
 height: 250px;
}
div.illust a{
 box-shadow: 7px 8px #ffdaa9;
}
div.illust02 a{
 background-color: #fff;
 border: solid 1px #000;
}
div.illust > a>img{
 border-radius: 17px;
}
/*-------------------------
footer
-------------------------*/
.footer{
}
.note{
 background-color: #f7869e;
 color: #fff;
 text-align: center;
 padding: 15px 5%;
 font-size: 1.15em;
 line-height: 1.5em;
}
.note a{
 border-bottom: solid 1px #fff;
}
.footer-wrapper{
 background-color: #dcdcdc;
 padding: 20px 5%;
 text-align: center;
}
.footer-box{
 display: flex;
 justify-content: center;
}
ul.footer-text{
 display: flex;
}
ul.footer-text li{
 display: flex;
 align-items: center;
 padding: 0 15px;
 border-right: solid 1px #111;
 height: 25px;
}
ul.footer-text li:last-child{
 border-right: 0;
}
.copyright{
 padding-top: 20px;
}

@media screen and (max-width: 1024px) {
	/* 1024px以下に適用されるCSS（タブレット用） */
 .header-inner{
  box-shadow: none;
 }
 .top-box01{
  display: block;
  text-align: center;
 }
 .top-box01 p{
  padding-right: 0;
 }
 .top-box01 a{
  display: block;
  margin-top: 20px;
 }
 .top-btn-tablet{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  background-color: #f7869e;
  color: #ffffff;
 }
 .top-btn-tablet >li:not(:last-child){
  border-right: 1px solid #ffffff;
 }
 .top-btn-tablet >li >a{
  padding: 5px 13px;
  display: block;
  width: 100%;
 }
 #main{
  margin-top:0;
 }
 .leftside{
  display: none;
 }
 .rightside{
  width: 100%;
  margin-left: 0;
 }
 div.illust, div.illust02{
  margin-right: 3%;
  width: 31%;
 }
 div.illust:nth-child(3n),
 div.illust02:nth-child(3n){
  margin-right: 0;
 }
 div.illust> a>img,
 div.illust02> a>img{
  max-width: 85%;
 }
 .top-btn,
 .none{
  display: none;
 }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
 img{
  width: 100%;
 }
 .h2{
  font-size: 1.7em;
 }
 .header-inner{
  padding: 10px 3%;
 }
 .logo-box{
  width: 35%;
 }
 .logo-box> img{
  max-width: 85%;
 }
 .header-right{
  justify-content: flex-end;
  width: 50%;
 }
 .search{
  margin-right: 0;
 }
 .search-img{
  max-width: 18px;
  height: auto;
 }
 .top-box01{
  padding: 20px 3%;
  font-size: 0.7em;
 }
 .top-box01 img{
  max-width: 80%;
 }
 div.illust, div.illust02,
 div.illust:nth-child(3n),
 div.illust02:nth-child(3n){
  margin-right: 6%;
  width: 46%;
 }
 div.illust:nth-child(2n),
 div.illust02:nth-child(2n){
  margin-right: 0;
 }
 div.illust> a> img,
 div.illust02> a> img{
  max-width: 90%;
 }
 .footer-wrapper{
 padding: 20px 3%;
 }
 .top-img-smt,
 .top_box_img_smt{
  display: block;
 }
 .none,
 .top-img,
 .top_box_img_pc{
  display: none;
 }
}