﻿@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
.font1{font-family: 'RocknRoll One', sans-serif;}

.linkStyle{color: #f57f40;}

/*-----------------top page------------------------------*/
#main_img{overflow:hidden;}
#main_img .txt{top:70%;}
#main_img h2:first-letter{
  font-size:7rem;
  color:#f68f26
}
#main_img h2{
  font-size: 3.472222vw;
  text-shadow: 5px 5px 0 black;
}
/*#video{height:100vh;}*/
.aisatsu{ 
  z-index:2;
 /* margin-bottom:10vh;*/
}
.aisatsu:before{
  content:'';
  position:absolute;
  display:block;
  width:189px;
  height:205px;
  background-image:url(./Dup/img/item1.png);
  background-repeat:no-repeat;
  bottom:-300px;
  right:250px;
  z-index:2;
 
}
.aisatsu_txt{
  left:0;
  right:0;
  margin:auto;
  top:-40px;
  width:60vw;
  padding: 30px 50px;
  border: 3px solid #333;
  border-radius: 20px;
}
#intro{
  padding-top:300px;
  padding-bottom:300px;
}
#intro .width_1280-max{margin-top:100px;}
#intro .intro_bg {
  background: url(./Dup/img/item3.png) no-repeat #f0d04e bottom 5% left 10%;
  width:70%;
}
.intro_title{position:relative;}
.intro_title:before{
  content:'';
  position:absolute;
  display:block;
  width:106px;
  height:87px;
  background-image:url(./Dup/img/title.png);
  background-repeat:no-repeat;
  top:-30px;
  left:-30px;
  background-size:50%;
}
.intro_title h2:first-letter,#contents1 h2:first-letter,#contents2 h2:first-letter{font-size:4rem;}
#intro figure{box-shadow:none;}
#contents1{
  background:url(./Dup/img/item2.png) no-repeat bottom right 10%;
  background-size:15%;
}
#contents1 .txt_box{padding-left:10%;}
#contents2 .cate_box{
  padding-bottom:300px;
  background:url(./Dup/img/item4.png) white no-repeat bottom center;
  border: 3px solid #333;
  border-radius: 20px;
}

#contents2 .contents2_bg::before{background-color: #909090;}


/*--------------under page---------------------------*/
#page_title::before{background: rgba(165,165,165,0.3);}


/* ---------- responsive ---------- */
@media screen and (max-width: 1550px){
#main_img h2:first-letter{font-size:6rem;}
.aisatsu:before{
  background-size: 80%;
  bottom: -350px;
  right: 180px;
}
#intro{padding-bottom: 250px;}
#intro .intro_bg{background-size: 30%;}
#contents1{background-size:13%;}
#contents2 .cate_box{
  padding-bottom: 250px;
  background-size: 25%;
}
}

@media screen and (max-width: 1160px){
#main_img .txt {
    top: 65%;
}
.aisatsu:before {
    background-size: 70%;
    bottom: -370px;
    right: 130px;
}
}

@media screen and (max-width: 1080px){
.aisatsu:before {
    background-size: 70%;
    bottom: -420px;
    right: 55px;
}
#intro{padding-bottom:250px;}
#contents2 .cate_box {
    padding-bottom: 220px;
}
}
@media screen and (max-width: 990px){
.aisatsu:before {bottom: -470px;}
#intro{padding-bottom:200px;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img{height:100%!important;}
#main_img .txt {top: 55%;}
.aisatsu{margin-bottom:400px;}
.aisatsu:before {bottom: -460px;}
.aisatsu_txt{top:-50px;}
#intro{
  padding-top:10px;
  padding-bottom: 300px;
}
#intro .intro_bg{background-size:50%;}
#contents1{
  padding-bottom: 300px;
  background-size: 25%;
}
#contents2 .cate_box{background-size: 30%;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#main_img{margin-top:65px;}
#main_img h2 {font-size: 25px;}
#main_img h2:first-letter{font-size:3rem;}
.aisatsu{
  margin-bottom:0;
  padding:20px;
}
.aisatsu:before {
   bottom: -110px;
   right: -35px;
}
.aisatsu_txt{
  top:0;
  position:initial;
  width:100%;
  padding:30px;
  box-sizing: border-box;
}
#intro .intro_bg{
  height:93%;
  background-size: 70%;
}
.intro_title h2:first-letter,#contents1 h2:first-letter,#contents2 h2:first-letter{font-size:3rem;}
.intro_title h2:first-letter{font-size:23px;}
#contents1 .txt_box{padding-left: 0;}
#contents1 {
    padding-bottom: 250px;
    background-size: 45%;
}
#contents2 .cate_box {
  background-size: 50%;
  padding-bottom: 150px;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
.more_bt a{padding-bottom:22px;}
}

