@charset "utf-8";

/* Theme: MyTheme */
/* root
---------------------------------------------*/
:root {
  --font-size-base: 24px;
}
@media (max-width: 750px) {
  :root {
    --font-size-base: 4vw;
  }
}
/* base
---------------------------------------------*/
.box{background:#444;
width:300px;
height:300px;
display: block;
margin:0 auto;}

* {margin:0;padding:0;}

a:link,a:visited {
	color: #2236cf;
	text-decoration:underline;
}
a:hover,a:active {
	color: #d90909;
	text-decoration:underline;
}
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
  background:#ffffff;
  text-align:center;
      line-height: 165%;
    letter-spacing: 0.02em;
 scroll-behavior: smooth;
   font-size: var(--font-size-base);
  font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #333333;
	  -webkit-font-smoothing: auto; /* または none で比較 */
  -moz-osx-font-smoothing: auto;
}

.font-ogl{font-family: "kinuta-mincho-stdn", sans-serif;
font-weight: 300;
font-style: normal;}
.font-ogr{font-family: "kinuta-mincho-stdn", sans-serif;
font-weight: 400;
font-style: normal;}
.font-ogb{font-family: "kinuta-mincho-stdn", sans-serif;
font-weight: 700;
font-style: normal;}

img{ display:block;
border: none;
max-width:100%;
height:auto;
margin:-1px auto;}
h3{font-family: "kinuta-mincho-stdn", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 1.5em;
text-align: center;
}
h3::after {
  content: "";
    display: block;
    width: 1em;
    height: 4px;
    background-color: #e38b8b;
    border-radius: 4px;
    margin: 0.2em auto 1em;
}
.auto-size {
  width: var(--pc-width);
  height: auto;
}

@media (max-width: 768px) {
  .auto-size {
    width: var(--sp-width);
  }
}


footer{font-size:0.7em;
padding-top:1em;
background:#fff0bd;}
footer a{    text-decoration: none !important;
    color: #252525 !important;}

/* layout
---------------------------------------------*/
ol,
ul{
	list-style-position: inside;
	padding-left:10px;
}
ol li,
ul li{
	text-align:left;
}

/* utilities
---------------------------------------------*/
.c{color:#d74a4a;}
.b{font-weight:bold;}
.y{background-color: #ffff66;}
.l{font-size:1.2em;    line-height: 130%;}
.ll{font-size:1.5em;    line-height: 130%;}
.u {  text-decoration: none;
background: linear-gradient(rgba(255, 204, 255,0) 80%, rgb(255, 244, 171) 20%);
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 2.5s;
}



/* components
---------------------------------------------*/
.text{width: 750px;
max-width: 96%;
background:#fff;
border-radius: .5em;
text-align: left;
margin: 0 auto;
padding:1em 0;}
.text p{max-width: 90%;
margin: 0 auto 1.5em;}
.text p{max-width: 90%;
margin: 0 auto 1.5em;}
.text p:last-child{margin-bottom: 0;}
h4 {max-width: 90%;
  font-size: 1.2em;
      border-bottom: 1px solid #225522;
margin: 0 auto 0.5em;
  position: relative;
  padding-left: 1em;
}
h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em; /* 調整して見た目を揃える */
  width: 0.4em;
  height: 0.4em;
  background-color: #225522; /* 色は任意 */
  transform: rotate(45deg);
}
body .mb0{margin-bottom:0em;}
body .mb1{margin-bottom:1em;}
body .mb2{margin-bottom:2em;}
body .mb3{margin-bottom:3em;}
body .mb4{margin-bottom:4em;}


/* pages - home
---------------------------------------------*/
.img-w100{width:100%;}
.head-pc{    background: url(../images/head-bg.jpg);
    background-position: bottom center;
    background-size: cover;
	position: relative;

    padding: 0;
  z-index: 0;}
.head-pc-img1 {
    padding: 3em 0 1.5em;
}
.head-pc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45px; /* 任意の高さ */
  background: linear-gradient(to top, #225522 40%, transparent 100%);
  pointer-events: none; /* クリック影響なし */
  z-index: 1;
}
.head-pc-img2{position: absolute;
	top:0;
	left:50%;
transform: translate(-50%, -50%);}
.head-pc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45px; /* 任意の高さ */
  background: linear-gradient(to top, #225522 40%, transparent 100%);
  pointer-events: none; /* クリック影響なし */
  z-index: 1;
}
.head-pc-img2{position: absolute;
	top:0;
	left:50%;
transform: translate(-50%, -50%);}
.form.form-1{padding:0;}
.form.form-2{padding:0 0 1em;}
.form.form-3{padding:3em 0 1em;}
.form{background:#225522;
padding:4em 0;}
.for-m-bg{width: 100%;
margin:-1px auto;}
form .input{    background: #fff;
    padding: 1em 1em;
    text-align: center;
    border-radius: 1em;
    width:80% ;
    max-width: 720px;
    margin-bottom: 1em;}
.nittei-box{    width: 730px;
    max-width: 100%;
    display: flex;
	flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-between;}
.nittei-text{     max-width: 49%;
    background: #f8efbf;
    margin: 0 auto 1.5em;
    padding: .5em 1em;}
hr{    border: 1px solid #e38b8b;
    margin-bottom: 0.5em;}
.sec2{background:#fff;
padding:0;}
.sec2.sec2-2{background:#fff;
padding:1em 0 0em 0;}
.sec2-text-bg{    background: #eeffee57;
    border: 1px solid #d2ddd2;
    border-radius: .5em;
    padding: 1em 0;
    margin-bottom: 1.5em;}
.sec3{background:#f0f0f0;
padding:0 0 2em 0;
position: relative;}
.sec3-clip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: block;
}
.sec3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #f7ecb2;
  clip-path: polygon(
    0 100%,       /* 左下 */
    0 0,          /* 左上 */
    50% 100%,     /* 中央下（谷） */
    100% 0,       /* 右上 */
    100% 100%     /* 右下 */
  );
  z-index: 2;
  pointer-events: none;
}
.sec4{background:#f7ecb2;
padding:3em 0 0;
position: relative;}
.sec5{background:#f4cfc9;
padding:0em 0 0em;
position: relative;}

.sec5 svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: block;
  z-index: 1;
}
.sec6{background:#fffbe8;
padding:0em 0 0;}
.sec6-wrap{margin:0 auto;
width: 750px;
max-width: 100%;}
.sec7-pr-img{    margin-top: -100px;}
.sec7-text{border-radius: 12px 100px 12px 12px;
  background:#e7fcf7;
}
.sec7-text.sec7-text2{border-radius: 12px 12px 12px 12px;
  background:#e7fcf7;
}
.sub{position: relative;}
.sub::after {
  content: "";
    display: block;
    width: 2em;
    height: 4px;
    background-color: #225522;
    border-radius: 4px;
    margin: 1.5em auto 3em;
}

.sec4-box{
	width: 750px;
max-width: 96%;
    border-radius: 0 142px 0 0;
	margin:0 auto;
}
.sec4-box .text{width: 750px;
max-width: 96%;
background:#fff;
    border-radius: .5em;
	margin:0 auto 3em;
}
.sec4-box .text.mb0{margin:0 auto 0em;}
p.sec6-bl{max-width: 96%;
    margin: 0 0.5em 1.5em;
	text-align: left;
    border-left: 2px solid #225522;
    padding: 0.5em;
    background: #fff6f5;
    border-radius: 0 4% 4% 0;}
    .sec5 p.sec6-bl{border-left: 2px solid #e38b8b;}
.sec6 p.sec6-bl{background:#fff;}
/* animations
---------------------------------------------*/
.reflection-img{
    width: 650px;
    max-height: 157px;
    border-radius: 999px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
  .btn-img {    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    cursor: pointer;
  }
  .fade-switch {
    transition: opacity 0.3s ease;
    opacity: 1;
  }
  .fade-switch.fade-out {
    opacity: 0;
  }
/* responsive
---------------------------------------------*/
@media screen and (min-width: 1600px) {
   .head-pc{ background-position: center calc(100% + 4vw);
}
}
@media only screen and
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
@media screen and (min-width: 751px){
	.sp{display:none;}
}
@media screen and (max-width: 750px){


	.pc{display:none;}
	footer br{display:inherit;}
#container{width: 100%;}
.reflection-img{max-width: 86%;
        height: 21vw;}
.nittei-text {    margin: 0 auto 0.5em;
    font-size: 5vw;
    width: 90vw;
    max-width: 90vw;
}
.sec3::after{    height: 7vw;}
.sec4-box{margin:0;}

.sec5{padding-top:1em;}
.sec7-pr-img{    margin-top: -10vw;}
.form .input{    width: 92%;}
.ttlsp{padding-top:1em;
        max-width: 90%;}
}
