@charset "utf-8";
html {
	font-size: 625%;
}
body {
	background: #f1f1f1;
	color: #231815;
	font-family: YakuHanJP, 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, 'Noto Sans JP', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans W3', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-feature-settings: "palt"1;
	line-height: 1.75;
	word-break: break-all;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	image-rendering: -webkit-optimize-contrast; /* Chrome */
}
p{font-size: 0.18rem;}
h1{font-size: 0.32rem;}
h2{font-size: 0.27rem;}
h3{font-size: 0.22rem;}
a {color: #D61718; transition: .5s; text-decoration: none; font-weight: bold;}
a:hover {opacity: .5;}

@media (max-width: 640px){
  p{font-size: 0.16rem;}
  h1{font-size: 0.25rem;}
  h2{font-size: 0.2rem;}
  h3{font-size: 0.17rem;}
}


@media only screen and (min-width:641px){.sp{ display:none !important;}}
@media only screen and (max-width:640px){
  .pc{ display:none !important;}
}


/* main */
.main{background: url("../img/index/logo.png") no-repeat top 80px left 50px,url("../img/index/bg-01.jpg") no-repeat; background-size: 15%,100%; padding:10px 0 50px; background-color: #a1cbed;}
.main h2 img{width: 70%; margin: 0 auto; display: block;}
.main .comment{max-width: 1000px; width: 90%; margin: 50px auto 0; position: relative; padding: 0 50px 70px; background:#fff; border-radius: 10px;}
.main .comment::after {
   position: absolute; 
   content: ''; 
   right: 0px; 
   top: 0px; 
   border-width: 0 25px 25px 0; 
   border-style: solid; 
   border-color: #ccc #a0cbeb #ccc;
   box-shadow: -1px 1px 1px rgb(0 0 0 / .15);
}
.main .comment img{position: absolute; left: 10vw; top:1vw;}
.main .comment p {margin: 0;}
.main .comment h2 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}
.main .comment h2:before, .main .comment h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}
.main .comment h2:before {left:0;}
.main .comment h2:after {right: 0;}


@media (max-width: 640px){
  .main{background: url("../img/index/logo.png") no-repeat top 20px left 20px,url("../img/index/bg-01-sp.jpg") no-repeat; background-size: 50%,100%; padding:10px 0 20px; background-color: #a1cbed;}
  .main h2 img{width: 100%; margin: 20px auto 0;}
  .main .comment{max-width: 500px; width: 90%; line-height: 1.4; margin: 0 auto; padding: 0 20px 30px;}
  .main .comment img{left: 2vw; top:2vw; width: 25%;}
}


/* 共通 */
#contents{margin: 0 auto; text-align: center;}
.bg{background: url("../img/index/bg.png") no-repeat; position: fixed; background-size: cover; z-index: -1; width: 100%; height: 100%;}
b{color: #D61718;}
h2.title {
  position: relative;
  margin: 30px auto;
  text-align: center;
  width: 600px;
  font-size: 0.35rem;
}
h2.title:before,
h2.title:after {
  position: absolute;
  z-index: 0;
  bottom: -10px;
  display: block;
  content: '';
  border: 1em solid #d14a0f;
}
h2.title:before {
  left: -30px;
  border-left-width: 15px;
  border-left-color: transparent;
}
h2.title:after {
  right: -30px;
  border-right-width: 15px;
  border-right-color: transparent;
}
h2.title span {
  position: relative;
  z-index: 1;
  display: block;
  padding: .1rem 1rem;
  color: #fff;
  background: #ea5514;
}
h2.title span:before,
h2.title span:after {
  position: absolute;
  bottom: -10px;
  display: block;
  width: 10px;
  height: 10px;
  content: '';
  border-style: solid;
  border-color: #d14a0f transparent transparent transparent;
}
h2.title span:before {left: 0; border-width: 10px 0 0 10px;}
h2.title span:after {right: 0; border-width: 10px 10px 0 0;}
.kikan p b{font-size:.3rem;}
.waku{max-width: 1000px; width: 90%;
    margin: 50px auto;
    border: 2px solid #fff;
    background: rgb(255,255,255,.5);
    border-radius: 10px;}
.waku h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5em 0;
    background-color: #fff;
    color: #231815;
    font-weight: 600;
}
.waku p {
    margin: 0;
    padding: 1.5em 1.5em;
    color: #333;
    text-align: center;
    line-height: 1.2;
}
.item{display: flex; justify-content: center;}
.item .naiyou{width: 23%;}
.item .naiyou img{width: 100%;}

.accordion {
    max-width: 1000px;
    width: 90%;
    margin:0 auto 10px;
    border: 2px solid #D61718;
    border-radius: 10px;
}
.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 24px;
    text-align: center;
    background: #D61718;
}
.accordion summary span{text-align: center; margin: 0 auto;}
.accordion summary::-webkit-details-marker {display: none;}
.accordion summary::before,
.accordion summary::after {
    width: 3px;
    height: .9em;
    border-radius: 10px;
    background-color: #FFFFFF;
    content: '';
}
.accordion summary::before {position: absolute; right: 2em; rotate: 90deg;}
.accordion summary::after {transition: rotate .5s;}
.accordion[open] summary::after {rotate: 90deg;}
.accordion p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #231815;
    transition: transform .7s, opacity .7s;
}
.accordion[open] p {transform: none; opacity: 1; background: rgb(255,255,255,.5); text-align: left; padding:50px;}

@media (max-width: 640px){
  #contents{max-width: 640px;}
  h2.title {margin: 50px auto 30px; max-width: 300px; width: 90%; font-size: 0.25rem;}
  h2.title span {padding: .1rem .2rem;}
  .kikan p b{font-size:.25rem;}
  .waku{max-width: 500px; width: 90%; margin: 20px auto;}
  .waku h2 {padding: .3em 0;}
  .waku p {padding:1.3em 1em; line-height: 1.4;}
  .item{display: block;}
  .item .naiyou{width: 80%; margin: 0 auto;}
  .accordion {max-width: 500px; width: 90%;}
  .accordion summary {font-size: 20px; padding: .7em 2em;}
  .accordion[open] p {padding:30px;}
}

/* web */
.web{background: url("../img/index/bg-02.jpg") no-repeat top center; padding:150px 0 1px; background-color: #fede84;}
.comment p{text-align: left; }
.web .item .naiyou p span img{width: 40%; vertical-align: middle; margin: 0 5px 0 -50px;}
.web .item .naiyou p span{font-size: .23rem; font-weight: 700;}
.oubo{max-width: 1000px; width: 90%; background-color: #D61718; margin: 80px auto; border-radius: 10px; padding:15px 0;}
.oubo div {
  font-size: .2rem;
  font-weight: bold;
  position: relative;
  text-align: center;
  margin: 0 0 -40px;
  padding: 30px 0 0;
  color: #fff;
}
.oubo div:before {margin-right: 1rem; content: '＼';}
.oubo div:after {margin-left: 1rem; content: '／';}
.oubo a{
  max-width: 1000px;
  width: 90%;
  font-size: .3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: .2rem .7rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #D61718;
  border-radius: 0.5rem;
  background-color: #fff;
  border-bottom: 5px solid #8a0c0d;
}
.oubo a:hover {margin-top: 3px; border-bottom: 2px solid #e0d7d3;}


@media (max-width: 640px){
  .web{background: url("../img/index/bg-02-sp.jpg") no-repeat; padding:1px 0; background-size:100%; background-color: #fede84;}
  .comment{margin: 50px 0 0;}
  .web .item .naiyou p span img{width: 30%; margin: 0 5px 0 -40px;}
  .web .item .naiyou p span{font-size: .2rem;}
  .web .waku .item .naiyou p{padding:.5em 1em ;}
  .web .waku .item .naiyou p:last-child{padding:.5em 1em 1em;}
.oubo{max-width: 500px; width: 90%; margin: 40px auto; padding:2px 5px;}
 .oubo div {font-size: .15rem; margin: 0 0 -40px; padding: 30px 0 0;
}
 .oubo div:before {margin-right: .2rem;}
.oubo div:after {margin-left: .2rem;}
.oubo a{max-width: 400px; width: 90%; font-size: .2rem; line-height: 1.2; padding: .15rem .3rem;}
.oubo a:hover {margin-top: 3px; border-bottom: 2px solid #e0d7d3;}
}

/* hagaki */
.hagaki{background: url("../img/index/bg-03.jpg") no-repeat top center; padding:50px 0; background-color: #b5d681;}
.keyword h2 {
  font-size: .4rem;
  position: relative;
  text-align: center;
  border: 3px solid #fff;
  border-radius: 0 10px 10px 10px;
  max-width: 1000px;
  width: 90%;
  margin: 80px auto;
  background: #fff; 
  padding:20px 0;
}
.keyword h2:before {
  font-size: .2rem;
  position: absolute;
  top: -33px;
  left: -3px;
  height: 30px;
  padding: 0 5em;
  content: 'Keyword';
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #231815;
}
.hagaki h2.title{margin: 100px auto 20px;}
.hagaki .naiyou p span{font-size: .25rem; font-weight: 700;}

@media (max-width: 640px){
  .hagaki{background: url("../img/index/bg-03-sp.jpg") no-repeat; background-size:100%; background-color: #b5d681; padding:1px 0 50px;}
  .hagaki h2.title{margin:50px auto 30px;}
  .hagaki .naiyou img{width: 75%;}
  .keyword h2 {font-size: .3rem; max-width: 500px; width: 90%; margin: 50px auto; background: #fff; padding:10px 0;}
  .keyword h2:before {font-size: .15rem; top: -28px; height: 25px; padding: 0 3em;}
}

/* footer */
footer{
	padding: 0.4rem 0;
	background: #40220f;
	color: #fff;
	font-size:.2em;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
footer p small {display: block; margin: 0 auto;}
footer .footer-list{padding:10px 0 50px;}
footer .footer-list ul{display: flex; justify-content: center;}
footer .footer-list ul li{width: 250px;}
footer .footer-list ul li a{font-size: .17rem; color: #fff; text-decoration: underline;}

@media (max-width: 640px){
    footer .footer-list{max-width: 500px; width: 90%; margin: 0 auto; padding:0 0 30px;}
    footer .footer-list ul{display: block; }
    footer .footer-list ul li{margin: 0 auto;}
    footer .footer-list ul li a{font-size: .13rem;}
}