@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@100..900&family=Zen+Old+Mincho&display=swap');


/*共通設定*/

.pc-only { display: block; } .sp-only { display: none; }
@media screen and (max-width: 768px) { .pc-only { display: none; } .sp-only { display: block; } }

body { font-family: "Noto Sans JP", sans-serif; overflow-x: hidden; overflow-y: scroll; }
sup { font-size: 70%; vertical-align: super; }
section { position: relative; overflow: hidden; padding: 100px 0; }
.wrapper { display: block; position: relative; width: 90%; margin: 0 auto; }

.button a { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; border-radius: 9999px; max-width: 300px; padding: 15px 30px 15px 25px; color: #fff; line-height: 1.8; text-decoration: none; font-weight: 500; background: linear-gradient(270deg, #67dfd0 0%, #5bd4d8 25%, #41bbe9 51%, #209cff 100%); background-position: 50% 1%; background-size: 200% auto; transition: all 0.3s ease-out; letter-spacing: 2px; font-size: 120%; }
.button a:hover { color: #fff; background-position: 99% 50%; }
.button a::before { content: ""; position: absolute; right: 60px; top: 0px; bottom: 0px; width: 1px; background: #fff; opacity: 0.5; }
.button a::after { content: "▶"; position: absolute; right: 23px; top: 50%; transform: translateY(-50%); font-size: 0.5em; }


/*個別設定*/

header { width: 100%; padding: 15px 0; text-align: center; background-color: #000; color: #fff; font-weight: 500; }

section#main-image { background: url("../img/main-background.jpg")no-repeat center bottom; background-size: cover; padding: 100px 0 180px; }
section#main-image div.wrapper { max-width: 1280px; }
section#main-image img.main-text { max-width: 600px; display: block; width: 50%; padding: 40px 0 0 0; }
section#main-image img.main-image { position: absolute; top: -50px; right: 0; max-width: 800px; width: 62%; z-index: 1; animation: fuwafuwa 3s ease-in-out infinite alternate; will-change: transform; }
@keyframes fuwafuwa { from { transform: translateY(0); } to { transform: translateY(10px); } }
section#main-image img.main-image-shadow { position: absolute; top: -45px; right: 0; max-width: 800px; width: 62%; z-index: 0; }

section#area1 div.wrapper { max-width: 1280px; }
section#area1 div.area1-title { border-left: 12px solid #000; padding: 0 0 0 20px; font-size: 220%; font-weight: bold; letter-spacing: 2px; line-height: 90%; }
section#area1 div.area1-title span { display: block; font-size: 66%; font-weight: 200; }
section#area1 table { width: 100%; border: 4px solid #ccc; margin: 40px 0 0; color: #333; font-size: 120%; letter-spacing: 1px; line-height: 180%; }
section#area1 table tr th { border-bottom: 1px solid #fff; vertical-align: middle; background-color: #ccc; width: 30%; font-size: 120%; font-weight: 900; }
section#area1 table tr td { border-bottom: 1px solid #ccc; width: 70%; font-weight: 600; padding: 20px; }
section#area1 table tr td img { width: 100%; }
section#area1 table tr td div.table-link { border: 1px solid #7bb6c6; width: calc(50% - 102px); margin: 30px 30px; padding: 20px; float: left; letter-spacing: 0; }
section#area1 table tr td div.table-link a { color: #057593; display: block; text-decoration: none; }
section#area1 table tr td div.table-link a:hover { text-decoration: underline; }
.map-embed { position: relative; width: 100%; height: 0; padding-top: 56.25%; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media screen and (max-width: 768px) { .map-embed { padding-top: 100%; } }

section#area2 div.wrapper { max-width: 1280px; }
section#area2 { background: url("../img/area2-background.jpg")no-repeat left top; background-size: contain; padding: 100px 0 180px; }
section#area2 div.title { text-align: center; background: url("../img/title1-background.jpg")no-repeat center top; min-height: 200px; font-size: 300%; font-weight: 400; letter-spacing: 15px; padding: 67px 0 0 0;  }
section#area2 div.title span { display: block; font-family: "Crimson Text", serif; color: #0767ae; margin: 10px 0 0 0; font-size: 40%; letter-spacing: 0; }
section#area2 div.product-name-wrapper { background-color: #f6f6f6; text-align: center; padding: 60px 0; line-height: 180%; }
section#area2 div.product-name-wrapper div.product-name { border-bottom: 1px solid #7b7b7b; max-width: 90%; margin: 0 auto 40px; padding: 0 0 20px; font-weight: 600; font-size: 250%; letter-spacing: 2px; }
section#area2 div.product-name-wrapper div.product-name img { width: 120px; vertical-align: middle; }
section#area2 div.product-name-wrapper div.product-name span { font-size: 50%; margin: 0 20px; }
section#area2 div.product-name-wrapper div.product-name sup { font-weight: 600; }
section#area2 div.product-name-wrapper div.product-content { font-size: 120%; font-weight: 400; line-height: 200%; z-index: 1; position: relative; letter-spacing: 2px; }
section#area2 div.product-name-wrapper div.product-content span { position: relative; display: inline-block; line-height: 1.4; padding: 0 .15em; font-weight: 600; }
section#area2 div.product-name-wrapper div.product-content span::after { content:""; position:absolute; left:-.1em; right:-.1em; bottom:.08em; height:.55em; background:#d8d8d8; z-index:-1; }
section#area2 div.product-name-wrapper p { width: max-content; position: absolute; bottom: -20px; left: 0; right: 0; margin: auto; color: #fff; background-color: #515151; padding: 10px 20px; font-weight: 600; font-size: 120%; }
section#area2 div.product-main { padding: 120px 0 0; }
section#area2 div.product-main div.left { float: left; width: calc(60% - 100px); padding: 0 50px; }
section#area2 div.product-main div.left img { width: 100%; }
section#area2 div.product-main div.right img { display: block; margin-bottom: 15px; }
section#area2 div.product-main div.right { float: right; width: calc(40% - 60px); padding: 0 60px 0 0; }
section#area2 div.product-main div.right span { display: block; border-left: 10px solid #e0e0e0; background-color: #eee; padding: 20px 0 20px 20px; margin: 0 0 10px; font-size: 110%; }
section#area2 div.product-main div.right p { display: block; border: 5px solid #50b5f4; padding: 10px 20px; line-height: 180%; color: #008de7; }
div.button-wrapper { clear: both; padding: 40px 0 0; }
section#area2 div.product-main div.button-wrapper div.button a { max-width: 310px; }
section#area2 div.product-name-wrapper2 { margin-top: 100px; }
section#area2 div.product-name-wrapper2 div.product-content span { color: #2a776d; }
section#area2 div.product-name-wrapper2 div.product-content span::after { content:""; position:absolute; left:-.1em; right:-.1em; bottom:.08em; height:.55em; background:#c2f3ed; z-index:-1; }
section#area2 div.product-name-wrapper2 p { width: max-content; position: absolute; bottom: -20px; left: 0; right: 0; margin: auto; color: #fff; background-color: #2a776d; padding: 10px 20px; font-weight: 600; font-size: 120%; }
section#area2 div.product-name-wrapper div.product-name p { top: 70px; bottom: auto; right: 70px; left: auto; border: 1px solid #000; font-size: 50%; background-color: #f6f6f6; color: #000; padding: 10px 0 0 0; }
section#area2 div.product-name-wrapper div.product-name p span { display: block; letter-spacing: 0; margin: 0 10px; }

section#area3 div.wrapper { max-width: 1280px; }
section#area3 { background: url("../img/area3-background.jpg")no-repeat right top; background-size: contain; padding: 100px 0 180px; }
section#area3 div.title { text-align: center; background: url("../img/title1-background.jpg")no-repeat center top; min-height: 200px; font-size: 300%; font-weight: 400; letter-spacing: 15px; padding: 67px 0 0 0;  }
section#area3 div.title span { display: block; font-family: "Crimson Text", serif; color: #0767ae; margin: 10px 0 0 0; font-size: 40%; letter-spacing: 0; }
section#area3 div.product-other-1 { padding: 120px 0 0; clear: both; overflow: hidden; margin-bottom: 60px; }
section#area3 div.product-other-1 div.left { float: left; width: calc(48% - 60px); padding: 0 30px; }
section#area3 div.product-other-1 div.right { float: right; width: calc(52% - 60px); padding: 0 30px 0 0; }
section#area3 div.product-other-1 div.left img,section#area3 div.product-other-2 div.right img { width: 100%; }
section#area3 div.product-name { font-weight: 600; border-bottom: 1px solid #a9a9a9; color: #000; font-size: 140%; letter-spacing: 1px; padding: 0 0 30px 0; }
section#area3 div.product-name span { color: #0767ae; font-size: 120%; margin-left: 30px; }
section#area3 div.product-name p { display: block; float: right; color: #fff; background-color: #ff0000; border-radius: 10px; font-size: 80%; padding: 10px 20px; letter-spacing: 0; font-weight: 800; }
section#area3 div.product-content { font-size: 110%; padding: 20px 0 40px; letter-spacing: 1; font-weight: 400; line-height: 180%; }
section#area3 div.product-content span { font-weight: 900; }
section#area3 div.button a { margin: 0 0 20px 0; }
section#area3 div.product-other-2 { padding: 120px 0 0; clear: both; overflow: hidden; margin-bottom: 60px; }
section#area3 div.product-other-2 div.left { float: left; width: calc(52% - 100px); padding: 0 30px; }
section#area3 div.product-other-2 div.right { float: right; width: calc(48% - 60px); padding: 0 30px 0 0; }
section#area3 div.product-other-2 div.left img,section#area3 div.product-other-2 div.right img { width: 100%; }

section#area4 { overflow: visible; }
section#area4 div.wrapper { max-width: 1280px; }
section#area4 { background: url("../img/area4-background.jpg")no-repeat left top; background-size: contain; padding: 100px 0 180px; }
section#area4 div.title { text-align: center; background: url("../img/title1-background.jpg")no-repeat center top; min-height: 200px; font-size: 300%; font-weight: 400; letter-spacing: 15px; padding: 67px 0 0 0;  }
section#area4 div.title span { display: block; font-family: "Crimson Text", serif; color: #0767ae; margin: 10px 0 0 0; font-size: 40%; letter-spacing: 0; }
section#area4 div.button a { margin: 0 0 0 20px; }
section#area4 div.sub { color: #fff; background-color: #0767ae; display: inline-block; padding: 10px; margin-bottom: 20px; margin-left: 20px; }
section#area4 div.main { color: #0767ae; font-size: 220%; letter-spacing: 2px; margin-bottom: 60px; }
section#area4 p { text-align: center; width: 350px; margin: 15px 0 40px; color: #0f0f0f; }
section#area4 img { position: absolute; top: 6%; right: 0; width: 46%; }

section#area5 { overflow: visible; background-color: #f3fafe; margin: 150px 0 0; z-index: 1; }
section#area5 div.background img:nth-child(1) { width: 400px; position: absolute; top: -150px; right: -210px; }
section#area5 div.background img:nth-child(2) { width: 400px; position: absolute; top: 250px; left: -188px; }
section#area5 div.background img:nth-child(3) { width: 400px; position: absolute; bottom: -150px; right: -210px; }
section#area5 div.wrapper { max-width: 1280px; }
section#area5 div.wrapper img { display: block; width: 100%; margin: 0 auto; max-width: 800px }
section#area5 div.wrapper p { display: block; text-align: center; color: #333; letter-spacing: 1px; }
section#area5 div.wrapper p:nth-child(2) { font-size: 180%; }
section#area5 div.wrapper p:nth-child(3) { font-size: 230%; font-weight: 700; margin: 40px 0; }
section#area5 div.wrapper p:nth-child(4) { font-size: 180%; }

section#area6 { background-color: #f2f2f2; margin: 0; padding: 200px 0 200px; }
section#area6 div.wrapper { max-width: 1280px; color: #333; }
section#area6 div.title { text-align: left; background: url("../img/title2-background.jpg")no-repeat left top; min-height: 200px; font-size: 300%; font-weight: 400; letter-spacing: 15px; padding: 67px 0 0 67px;  }
section#area6 div.title span { display: block; font-family: "Crimson Text", serif; color: #333; margin: 10px 0 0 0; font-size: 40%; letter-spacing: 0; }
section#area6 div.sub { border-top: 4px solid #999; border-bottom: 1px solid #999; text-align: center; margin-bottom: 50px; padding: 30px 0; color: #333; font-size: 150%; }
section#area6 div.wrapper img.left { width: calc(45% - 15px); display: block; float: left; }
section#area6 div.wrapper img.right { width: calc(55% - 15px); display: block; float: right; }

section#area7 div.wrapper { max-width: 1280px; }
section#area7 { padding: 100px 0 180px; }
section#area7 div.sub { color: #fff; background-color: #000; display: inline-block; padding: 10px 20px; margin-bottom: 40px; }
section#area7 div.main { color: #000; font-size: 220%; letter-spacing: 2px; margin-bottom: 60px; line-height: 180%; font-family: "Zen Old Mincho", serif; }
section#area7 hr { width: 350px; display: inline-block; border: none; border-bottom: 1px solid #9cc2df; margin-bottom: 60px; }
section#area7 p { text-align: left;  margin: 0 0 100px; line-height: 250%; font-size: 120%; }
section#area7 img { position: absolute; top: 0; right: 0; width: 33%; }
section#area7 div.button a { padding: 15px 30px 15px 0px; }

section#area8 { background-color: #f4f4f4; text-align: center; }

/*スマホ設定*/

@media screen and (max-width: 810px) {

header { font-size: 85%; }
section { padding: 50px 0; }
section#area1 div.area1-title { font-size: 140%; }
section#area1 table { font-size: 100%; }
section#area1 table tr th,section#area1 table tr td { display: block; width: 100%; }
section#area1 table tr td { width: calc(100% - 40px); font-size: 78%; letter-spacing: 0; }
section#area1 table tr td div.table-link { width: calc(100% - 24px); margin: 30px 0; padding: 10px; float: none; }
section#area2 { padding: 0px 0 180px; }
section#area2 div.title { min-height: 100px; font-size: 180%; letter-spacing: 8px; padding: 30px 0 0 0; background-size: 100px auto; }
section#area2 div.product-name-wrapper { padding: 30px 20px; }
section#area2 div.product-name-wrapper div.product-name { font-size: 180%; margin: 0 auto 20px; }
section#area2 div.product-name-wrapper div.product-name img { display: block; margin: 0 auto; }
section#area2 div.product-name-wrapper div.product-name span { display: block; }
section#area2 div.product-name-wrapper div.product-content { font-size: 110%; }
section#area2 div.product-name-wrapper p { bottom: -30px; font-size: 85%; }
section#area2 div.product-main { padding: 60px 0 0; }
section#area2 div.product-main div.left { float: none; width: auto; padding: 0; }
section#area2 div.product-main div.right {
  float: none;
  width: calc(100% - 0px);
  font-size: 85%;
}
section#area2 div.product-main div.right img {
  margin: 15px 0;
  width: 75px;
}
section#area2 div.product-name-wrapper div.product-name p {
  top: auto;
  bottom: auto;
  right: auto;
  left: auto;
  font-size: 55%;
  padding: 0 5px;
  position: relative;
  text-align: center;
  display: block;
  margin: 20px auto 0;
}
section#area2 div.product-main div.right span {
  padding: 10px 0 10px 10px;
  margin: 0 0 10px;
  font-size: 100%;
}
section#area2 div.product-main div.right p { padding: 10px; }
section#area3 { padding: 0px 0 60px; }
section#area3 div.title { min-height: 100px; font-size: 180%; letter-spacing: 8px; padding: 30px 0 0 0; background-size: 100px auto; }
section#area3 div.product-other-1 {
  padding: 60px 0 0;
  margin-bottom: 60px;
}
section#area3 div.product-other-1 div.left {
  float: none;
  width: 100%;
  padding: 0;
}
section#area3 div.product-other-1 div.right {
  float: none;
  width: 100%;
  padding: 0 30px 0 0;
}
section#area3 div.product-name {
  font-size: 120%;
  padding: 30px 0 30px 0;
}
section#area3 div.product-other-2 {
  padding: 60px 0 0;
  margin-bottom: 60px;
}
section#area3 div.product-other-2 div.right {
  float: none;
  width: 100%;
  padding: 0;
}
section#area3 div.product-other-2 div.left {
  float: none;
  width: 100%;
  padding: 0;
}
section#area3 div.product-name span {
  margin: 10px 0 0 0;
  display: block;
}
section#area3 div.product-name p { margin-top: -40px; }
section#area4 { padding: 0; }
section#area4 div.title { font-size: 200%; letter-spacing: 8px; }
section#area4 img {
  position: relative;
  top: auto;
  right: auto;
  width: 90%;
  margin: 0 auto 40px;
}
section#area4 div.main { font-size: 180%; letter-spacing: 2px; margin-bottom: 10px; }
section#area4 div.button a { margin: 0; }
section#area5 div.background img:nth-child(1) {
  width: 200px;
  top: -70px;
  right: -110px;
}
section#area5 div.background img:nth-child(2) {
  width: 200px;
  position: absolute;
  top: 400px;
  left: -88px;
}
section#area5 div.wrapper p:nth-child(2) {
  font-size: 120%;
}
section#area5 div.wrapper p:nth-child(3) {
  font-size: 150%;
}
section#area5 div.wrapper p:nth-child(4) {
  font-size: 120%; letter-spacing: 0;
}
section#area6 {
  padding: 100px 0;
}
section#area6 div.title {
  font-size: 200%;
    background-size: 100px auto;
    min-height: 100px;
    padding: 30px 0 0 30px;
    letter-spacing: 0;
}
section#area6 div.sub { font-size: 120%; }
section#area6 div.wrapper img.left { margin-bottom: 10px; }
section#area6 div.wrapper img.left,section#area6 div.wrapper img.right { width: 100%; float: none; }
section#area7 div.main {
  font-size: 180%;
  letter-spacing: 1px;
  margin-bottom: 60px;
}
section#area7 img {
  top: -45px;
}
section#area7 p {
  margin: 0 0 50px;
  line-height: 180%;
  font-size: 100%;
}
section#main-image {
  padding: 0 0 20px;
}
section#main-image img.main-image { top: 47px; width: 50%; }
section#main-image img.main-text {
  width: 70%;
  padding: 40px 0 0 0;
}
section#main-image img.main-image-shadow { top: 55px; width: 50%; }

}