@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&family=Noto+Serif+JP:wght@400;700;900&display=swap');

.pc { display: block; }
.sp { display: none; }

/* FADE定義 */

.fadeRight { animation-name: fadeRightAnime; animation-duration: 0.5s; animation-fill-mode:forwards; opacity: 0; }
@keyframes fadeRightAnime{ from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }

/* ベース定義 */

ul li.navi-button { display: inline-block; letter-spacing: 2px; font-size: 85%; margin-top: 5px; margin-right: 35px; vertical-align: top; }
ul li.navi-button { margin-top: 10px; margin-right: 10px; }
ul li.navi-button:last-child { margin-right: 0;  }
ul li.navi-button:first-child a { padding: 0px 16px 0px 19px;  }
ul li.navi-button a { display: block; border-radius: 17px; padding: 7px 16px 7px 19px; letter-spacing: 0; transition: 0.2s; color: #583b0a; text-decoration: none; background-color: #f9dba0; font-weight: 700; }
ul li.navi-button a:hover { text-decoration: none; background-color: #ffd7c0; }
ul li.navi-button a span { float: left; margin: 10px 10px 0 0; }
ul li.navi-button a span.cl { float: left; margin: 0; }
ul li.navi-button a span.sub { float: none; font-size: 70%; font-weight: 400; }

body { font-size: 100%; background-color: #FFFFFF; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; background: url("../img/top-background.jpg")top left repeat-x #fff; color: #583b0a; overflow-x: hidden; }

html { scroll-behavior: smooth; }

a { text-decoration: underline; color: #009de3; }
a:hover { text-decoration: none; color: #009de3; }
a:visited { color: #009de3; }

header div#top-logo { float: left; }
header div#navigation { float:right; margin: 20px 0 0 0; }

.box { padding: 25px; margin: 20px auto 60px; width: 90%; max-width: 1200px; clear: both; overflow: hidden; }
.imageLeft { float: left; width: 40%; padding: 0 5% 0 2%; }
.read { padding-right: 0 ;}
.imageLeft img { width: 100%; }
.imageRight { float: left; width: 40%; padding: 0 5%; }
.imageRight img { width: 100%; }


/*base*/

#top-logo { font-size: 200%; font-weight: 700; letter-spacing: 1px; }
#top-logo span { color: #1b6f12; }
#top-logo img { display: inline-block; vertical-align: top; margin: 0 10px 0 0; }

#main-image { width: 1400px; margin: 0 auto 100px; white-space: nowrap; }
#main-image div.textarea { padding: 0 0 0 10%; display: inline-block; width: 492px; vertical-align: top; }
#main-image div.textarea span { display: block; }
#main-image img.main-image-sub { width: 80px; float: right; }
#main-image div.photo { display: inline-block; }
#main-image span.main { color: #1b6f12; background-color: #f0ff73; font-size: 200%; font-weight: 600; margin: 91px 0 0 0; letter-spacing: 10px; }
#main-image span.main:last-child { margin: 10px 0 0 0; }

.underline { border-bottom: 1px dotted #000; padding-bottom: 60px; }

.read-copy { background-color: #f4f4f4; border-radius: 20px; padding: 20px; display: table-cell; }

.read-copy2 { background-color: #fff; color: #1b6f12; border: 1px solid #1b6f12; height: 163px; border-radius: 20px; padding: 20px; display: inline-block; margin: 0 3px; width: calc(20% - 10px); vertical-align: top; }
.read-copy2 p { position: absolute; top: 50%; transform: translate(0, -50%); width: 85%; /* この要素の高さの半分 */}

.titleA { color: #fff; font-weight: 700; font-size: 150%; background-color: #1b6f12; border-radius: 30px; padding: 10px; margin: 0 0 40px 0; text-align: center; }

.noteA { background-color: #fff; background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); background-size: 100% 2.8em; line-height: 2.8em; padding-bottom: 1px; /* 最終行の下にも罫線を引く */ padding-left: 10px; padding-right: 10px; width: 95%; margin: 0 auto; }
.noteA span { color: #1b6f12; font-weight: 700; margin: 0 5px; }

.titleB { display: flex; justify-content: center; align-items: center; font-size: 150%; margin-bottom: 60px; text-align: center; color: #1b6f12; clear: both; font-weight: 600; }
.titleB::before, .titleB::after { content: ''; width: 2px; height: 40px; background-color: #1b6f12; }
.titleB::before { margin-right: 30px; transform: rotate(-35deg) }
.titleB::after { margin-left: 30px; transform: rotate(35deg) }

.noteB { background-color: #fff; background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); background-size: 100% 2.8em; line-height: 2.8em; padding-bottom: 1px; /* 最終行の下にも罫線を引く */ padding-left: 10px; padding-right: 10px; width: 60%; margin: 0 auto; float: left; }

#backgroundA { background: url("../img/background-a.png")bottom left repeat-x #e1c28b; }
#backgroundA div.box { margin: 0 auto; }

.titleC { background-color: #ebdbc0; border-radius: 20px; width: 80%; margin: 80px auto 60px; padding: 20px 60px 20px 60px; font-size: 120%; font-weight: 600; }
.img-25 { width: 23%; margin: 0 1% 60px 1%; float: left; }
.img-25 img { width: 100%; padding: 10%; }

#backgroundB { background: url("../img/background-b.png")bottom left repeat-x #eedcbc; }
#backgroundB div.box { margin: 0 auto; }

.titleD { margin: 80px auto 0; padding: 20px 60px 0 60px; font-size: 180%; font-weight: 600; text-align: center; }
.titleD span { font-size: 150%; font-weight: 900; color: #1b6f12; }
#backgroundB div.sub { color: #666; font-size: 75%; font-weight: 400; text-align: center; margin: 0 0 20px 0; }
.img-100 { width: 100%; text-align: center; margin-bottom: 120px; }
.img-100 img { width: 100%; }

#footer { background-color: #916b27; text-align: center; }
#footer div.box { margin: 0 auto; }
#footer b { color: #fff; font-size: 150%; font-weight: 600; margin-bottom: 20px; }
#footer p { color: #fff; font-size: 85%; font-weight: 400; margin-top: 20px; }

#page_top{ position: fixed; right: -150px; bottom: 50px; opacity: 1; z-index: 999; }
#page_top a{ position: relative; display: block; }
#page_top a::before{ bottom: 0; right: 0; left: 0; margin: auto; text-align: center; opacity: 0.6; }






a.cp_btn {
  margin: 30px auto 0;
  display: inline-block;
  max-width: 400px;
  width: 100%;
  padding: 0.4em;
  text-align: center;
  text-decoration: none;
  color: #9a3e8b;
  border: 2px solid #9a3e8b;
  border-radius: 40px;
  transition: .4s;
  line-height: 200%;
  font-size: 120%;
  font-weight: bold;
}

a.cp_btn:hover {
  background: #9a3e8b;
  color: #fff;
}





#main-image div.textarea2 { padding: 0 0 0 10%; display: inline-block; width: 623px; vertical-align: top; }
#main-image div.textarea2 img.main-image-sub { width: 80px; float: right; }
#main-image div.textarea2 img.main-image-sub2 { width: 32px; float: right; }
#main-image div.textarea2 div.photo { display: inline-block; }
#main-image div.textarea2 span.main { color: #1b6f12; background-color: #f0ff73; font-size: 200%; font-weight: 600; margin: 91px 0 0 0; letter-spacing: 1px; display: block; }
#main-image div.textarea2 span.main:last-child { margin: 10px 0 0 0; }



div.yasai-wrapper { text-align: center; letter-spacing: 1px; padding: 40px 0; }

.yasai-box{
  border: 2px dotted #ccc;
  border-radius: 20px;
  position: relative;
  margin-top: 4em;
}
.yasai-box h3{
  text-align: center;
  position: absolute;
  right: 0;
  left: 0;
  top: -0.8em;
}
.yasai-box span{
  padding: 0 1.5em;
  background: #FFF;
   font-size: 120%;
}
.yasai-box .inner{
  padding: 50px 37px 20px 37px; overflow: hidden;
}

.yasai-ko { width:23.13%;
  float: left;
  margin: 0 10px 20px; text-align: center; }
.yasai-ko img { width: 100%; }
.yasai-ko span { display: block; font-size: 100%; color: #000; }
.yasai-ko p { display: block; font-size: 85%; color: #333; background-color: #f4f4f4; padding: 10px; margin: 10px 0 0; }