@charset "UTF-8";
/* Scss Document */
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
small { font-size: 80%; }

strong, .bold { font-weight: 700; }

.fs12 { font-size: 1.2rem; }

.fs14 { font-size: 1.4rem; }

.fs16 { font-size: 1.6rem; }

.fs18 { font-size: 1.8rem; }

.fs20 { font-size: 2.0rem; }

.fs22 { font-size: 2.2rem; }

.fs24 { font-size: 2.4rem; }

.fs26 { font-size: 2.6rem; }

.fs28 { font-size: 2.8rem; }

.fs30 { font-size: 3.0rem; }

.fs32 { font-size: 3.2rem; }

.fs36 { font-size: 3.6rem; }

.fs40 { font-size: 4.0rem; }

.fs46 { font-size: 4.6rem; }

.fs48 { font-size: 4.8rem; }

.fs50 { font-size: 5.0rem; }

.fs56 { font-size: 5.6rem; }

.fs60 { font-size: 6.0rem; }

.flex { display: flex; }

.le_sp { letter-spacing: 2px; }

.lh100 { line-height: 1; }

.lh140 { line-height: 1.4; }

.lh160 { line-height: 1.6; }

.lh180 { line-height: 1.8; }

.lh200 { line-height: 2.0; }

.lh220 { line-height: 2.2; }

@media screen and (min-width: 768.2px) { .va { vertical-align: 0.1em; } }
.red { color: #E6372F; }

.green { color: #4D8526; }

.blue { color: #0082C8; }

.white { color: #fff; }

.wine { color: #B90244; }

.pink { color: #FAADB7; }

.g-blue { color: #78D6BE; }

@media screen and (max-width: 768px) { .fs12 { font-size: 80%; }
  .fs14, .fs16 { font-size: 1.2rem; }
  .fs18 { font-size: calc(1.5rem + 3 * (100vw - 320px)/448); }
  .fs20 { font-size: calc(1.6rem + 4 * (100vw - 320px)/448); }
  .fs22 { font-size: calc(1.6rem + 6 * (100vw - 320px)/448); }
  .fs24 { font-size: calc(1.6rem + 6 * (100vw - 320px)/448); }
  .fs26 { font-size: calc(1.8rem + 8 * (100vw - 320px)/448); }
  .fs28 { font-size: calc(1.9rem + 10 * (100vw - 320px)/448); }
  .fs30 { font-size: calc(2.0rem + 10 * (100vw - 320px)/448); }
  .fs32 { font-size: calc(2.0rem + 12 * (100vw - 320px)/448); }
  .fs36 { font-size: calc(2.2rem + 14 * (100vw - 320px)/448); }
  .fs40 { font-size: calc(2.4rem + 18 * (100vw - 320px)/448); }
  .fs46 { font-size: calc(3.0rem + 16 * (100vw - 320px)/448); }
  .fs48 { font-size: calc(3.0rem + 18 * (100vw - 320px)/448); }
  .fs50, .fs56, .fs60 { font-size: calc(4.0rem + 16 * (100vw - 320px)/448); } }
@media screen and (max-width: 320px) { .fs14 { font-size: 80%; } }
hr { height: 1px; margin: 0; padding: 0; background-color: #666666; border: none; }

@media only screen and (max-width: 768px) { .sp_none { display: none !important; } }
@media only screen and (max-width: 1024px) { .tab_none { display: none !important; } }
@media print, screen and (min-width: 1024.2px) { .tab_pc_none { display: none !important; } }
@media print, screen and (min-width: 768.2px) { .pc_none { display: none !important; } }
.w100 { width: 100%; max-width: 1340px; margin-left: auto; margin-right: auto; }

.w95 { width: 95%; max-width: 1340px; margin-left: auto; margin-right: auto; }

.w90 { width: 90%; max-width: 1340px; margin-left: auto; margin-right: auto; }
@media only screen and (max-width: 320px) { .w90 { width: 95%; } }

.w85 { width: 85%; max-width: 1340px; margin-left: auto; margin-right: auto; }

.w80 { width: 80%; max-width: 1340px; margin-left: auto; margin-right: auto; }

.flex { display: flex; }

.flex-sb { display: flex; justify-content: space-between; }

.flex-sa { display: flex; justify-content: space-around; }

.flex-items { display: flex; align-items: center !important; }

.flex-items-end { display: flex; align-items: flex-end !important; }

.tac { text-align: center; }

.tar { text-align: right; }

.tal { text-align: left; }

@media print, screen and (min-width: 768.2px) { .mx_c { width: max-content; width: -webkit-max-content; margin-left: auto; margin-right: auto; max-width: 100%; } }
.mx_width { max-width: 1340px; margin-left: auto; margin-right: auto; }

.mx1200 { max-width: 1200px; margin-left: auto; margin-right: auto; }

.mx900 { max-width: 900px !important; margin-left: auto; margin-right: auto; }

@media only screen and (max-width: 1023.8px) { .mx600 { max-width: 600px !important; }
  .mw95 { width: 95%; margin-left: auto; margin-right: auto; } }
.mgat { margin-left: auto; margin-right: auto; }

.mgt10 { margin-top: 10px; }

.mgt20 { margin-top: 20px; }

.mgb10 { margin-bottom: 10px; }

.mgb20 { margin-bottom: 20px; }

.mgb30 { margin-bottom: 30px; }

.mgb40 { margin-bottom: 40px; }

.mgb50 { margin-bottom: 50px; }

.mgb60 { margin-bottom: 60px; }

.mgb70 { margin-bottom: 70px; }

.mgb80 { margin-bottom: 80px; }

.mgb90 { margin-bottom: 90px; }

.mgb100 { margin-bottom: 100px; }

@media screen and (max-width: 768px) { .mgb30 { margin-bottom: 15px; }
  .mgb40 { margin-bottom: 20px; }
  .mgb50, .mgb60 { margin-bottom: 30px; }
  .mgb70, .mgb80, .mgb90 { margin-bottom: 50px; }
  .mgb100 { margin-bottom: 60px; } }
img { vertical-align: bottom; image-rendering: -webkit-optimize-contrast; max-width: 100%; }

@media print, screen and (min-width: 1024.2px) { a:hover { opacity: 0.75; } }
.scroll-prevent { /*動き固定*/ position: fixed; /*奥行きを管理*/ z-index: -1; /*下2つで背景を元のサイズのまま表示することができる*/ width: 100%; height: 100%; }

.notel { pointer-events: none; }

.notel a { text-decoration: none; color: inherit; }

@media only screen and (max-width: 1024px) { .kaigyo { display: inline-block; text-indent: 0; } }
@media print, screen and (min-width: 1024px) { .kaigyo_pc { display: inline-block; } }
html { font-size: 62.5%; }

body { font-family: "Noto Sans JP", sans-serif; color: #333; position: relative; position: relative; animation: fadeIn 2.5s ease 0s 1 normal; -webkit-animation: fadeIn 2.5s ease 0s 1 normal; }
@media only screen and (max-width: 768px) { body { font-size: 100%; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
header { width: 100%; height: 90px; position: fixed; z-index: 999; top: 0; background-color: #fff; }
@media only screen and (max-width: 1023.8px) { header { height: 60px; } }
header #header_inner { margin: 0 auto; height: 90px; display: flex; justify-content: space-between; }
@media only screen and (max-width: 1023.8px) { header #header_inner { height: 60px; } }
header #logo { display: flex; align-items: center; line-height: 1; }
@media print, screen and (min-width: 1024px) { header #logo { margin-left: 30px; box-sizing: border-box; } }
@media only screen and (max-width: 1023.8px) { header #logo { margin-left: 20px; } }
header #logo h1 { margin-left: 30px; font-size: 2.0rem; line-height: 1.2; font-weight: 700; }
@media only screen and (max-width: 1023.8px) { header #logo h1 { margin-left: 20px; font-size: 1.6rem; } }
header #logo img { display: block; }
@media print, screen and (min-width: 1024px) { header #logo .mark img { width: 100px; } }
@media only screen and (max-width: 1023.8px) { header #logo .mark img { height: 40px; } }

#main_visual { position: relative; width: 100%; max-width: 1920px; margin: 90px auto 0; height: calc(100svh - 90px); background: url("../../100th/share/images/main_visual_pc01.webp") no-repeat top center; background-size: cover; }
@media print, screen and (min-width: 1920.2px) { #main_visual { height: 1080px; } }
@media screen and (orientation: landscape) and (max-height: 767.8px) { #main_visual { background: url("../../100th/share/images/main_visual_pc01.webp") no-repeat top center; background-size: cover; height: calc(100svh - 60px); } }
@media screen and (orientation: portrait) and (min-width: 768.2px) { #main_visual { height: 0; padding-top: 60%; background: url("../../100th/share/images/main_visual_pc02.webp") no-repeat top center; background-size: cover; } }
@media only screen and (max-width: 1023.8px) { #main_visual { margin: 60px auto 0; } }
@media screen and (orientation: portrait) and (max-width: 768px) { #main_visual { background: url("../../100th/share/images/main_visual_sp.webp") no-repeat top center; background-size: cover; height: calc(100svh - 60px); } }
#main_visual .text { position: absolute; text-align: center; top: 460px; left: 0; right: 0; width: 90%; margin: 0 auto; font-size: 5.8rem; color: #000; font-weight: 900; text-shadow: 0 0 10px white, 0 5px 10px rgba(255, 255, 255, 0.7), 5px 0 10px rgba(255, 255, 255, 0.7), 0 -5px 10px rgba(255, 255, 255, 0.7), -5px 0 10px rgba(255, 255, 255, 0.7); }
@media screen and (orientation: portrait) and (min-width: 768.2px) and (max-width: 1200px) { #main_visual .text { top: 50%; font-size: calc(3.4rem + 14 * (100vw - 768px)/432); } }
@media only screen and (max-width: 768px) { #main_visual .text { top: calc(230px + 180 * (100vw - 375px)/393); font-size: calc(2.6rem + 18 * (100vw - 375px)/393); line-height: 1.4; } }
@media only screen and (max-width: 768px) { #main_visual .text { top: calc(230px + 180 * (100vw - 375px)/393); font-size: calc(2.6rem + 18 * (100vw - 375px)/393); line-height: 1.4; } }

@media screen and (orientation: portrait) and (min-width: 768.2px) { .scroll { display: none; } }
.scroll { bottom: 30px; left: 0; right: 0; margin: 0 auto; position: absolute; text-align: center; }

.scroll a { display: block; padding-top: 60px; color: #fff; font-size: 1.6rem; text-shadow: 0 0 10px #333, 0 0 10px #333, 0 0 10px #333; }
.scroll a:hover { opacity: 1; }

.scroll a::before { animation: scroll 2s infinite; border-bottom: 3px solid #fff; border-left: 3px solid #fff; content: ""; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; }

@keyframes scroll { 0% { opacity: 0; transform: rotate(-45deg) translate(0, 0); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: rotate(-45deg) translate(-20px, 20px); }
  100% { opacity: 0; } }
#message { max-width: 1920px; width: 100%; margin-inline: auto; background: url("../../100th/share/images/bg_message.webp") no-repeat; background-size: cover; padding: 80px 0; }
@media only screen and (max-width: 768px) { #message { padding: 50px 0; } }
#message .message_box { width: 90%; max-width: 1340px; margin-inline: auto; display: flex; justify-content: space-around; }
@media only screen and (max-width: 1023.8px) { #message .message_box { flex-direction: column; max-width: 640px; } }
#message .message_box li { list-style: none; width: 49%; background-color: #fff; border-radius: 10px; padding: 30px; }
@media only screen and (max-width: 1023.8px) { #message .message_box li { width: 100%; }
  #message .message_box li + li { margin-top: 30px; } }
@media only screen and (max-width: 768px) { #message .message_box li { padding: 20px 15px; } }
#message .message_box li .photo { width: 80%; max-width: 350px; margin: 0 auto 30px; }
#message .message_box li .photo figcaption { text-align: center; font-size: 1.8rem; margin-top: 10px; font-weight: 700; }
#message .message_box li .text { font-size: 1.6rem; line-height: 1.8; }
@media only screen and (max-width: 768px) { #message .message_box li .text { font-size: calc(1.4rem + 2 * (100vw - 375px)/393); } }
#message .message_box li .text p { text-indent: 1.0em; }
#message .message_box li .text p + p { margin-top: 10px; }

section h2 { font-weight: 700; text-align: center; line-height: 1; }
section h2 small { display: block; font-weight: 400; margin-top: 20px; }
@media only screen and (max-width: 768px) { section h2 small { margin-top: 15px; } }

#logo_mark .logo_mark { margin: 0 auto 50px; max-width: 400px; width: 80%; border: solid 1px #ececec; }
#logo_mark .purpose { max-width: 400px; width: 80%; margin-inline: auto; }

.bg_gray { background-color: #F8F8F8; padding: 80px 0; }
@media only screen and (max-width: 768px) { .bg_gray { padding: 30px 0; } }

.page_btn { list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1100px; width: 95%; }
.page_btn li { width: 45%; max-width: 500px; background-color: #fff; }
.page_btn li + li { margin-top: 30px; }
@media only screen and (max-width: 768px) { .page_btn li + li { margin-top: 15px; } }
@media only screen and (max-width: 1024px) { .page_btn li { width: calc((100% - 10px)/2); } }
.page_btn li > a { display: block; border: solid 1px #ccc; border-radius: 5px; overflow: hidden; text-decoration: none; color: #333; }
.page_btn li > a img { width: 100%; }
.page_btn li.l_btn { width: 100% !important; max-width: 1100px; }
.page_btn li.l_btn a:hover .name::after { right: 20px; }
.page_btn li.l_btn .name { font-size: 3.0rem; }
@media only screen and (max-width: 768px) { .page_btn li.l_btn .name { font-size: calc(1.6rem + 4 * (100vw - 375px)/393); } }
.page_btn li.l_btn .name::after { content: ""; display: block; position: absolute; background-size: contain; right: 24px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all .3s; }
@media print, screen and (min-width: 768.2px) { .page_btn li.l_btn .name::after { width: 22px; height: 21px; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath fill='%23962240' d='M12,0l-1.9,1.9L16.7,9H0V12h16.7l-6.6,7.1L12,21l10-10.5L12,0z'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat; } }
@media only screen and (max-width: 768px) { .page_btn li.l_btn .name::after { width: 8px; height: 14px; right: 10px; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath fill='%23962240' d='M9.5,10.2l-7.1,7.6c-0.3,0.3-0.8,0.3-1.1,0c0,0,0,0,0,0l-1.1-1.1c-0.3-0.3-0.3-0.8,0-1.1	l5.4-5.9c0.3-0.3,0.3-0.8,0-1.1L0.2,2.5c-0.3-0.3-0.3-0.8,0-1.1l1.1-1.1c0.3-0.3,0.8-0.3,1.1,0c0,0,0,0,0,0l7.1,7.6	C10.2,8.5,10.2,9.5,9.5,10.2z'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat; } }
.page_btn li .name { font-size: 2.4rem; font-weight: 700; padding: 15px 20px; position: relative; }
@media screen and (min-width: 768.2px) and (max-width: 1023.8px) { .page_btn li .name { font-size: calc(1.6rem + 4 * (100vw - 375px)/393); } }
@media only screen and (max-width: 768px) { .page_btn li .name { font-size: calc(1.4rem + 4 * (100vw - 375px)/393); padding: 10px 30px 10px 10px; } }
.page_btn li .name::after { content: ""; display: block; position: absolute; background-size: contain; right: 24px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all .3s; background: url("../images/ico_window.png") no-repeat; background-size: contain; }
@media print, screen and (min-width: 768.2px) { .page_btn li .name::after { width: 24px; height: 20px; } }
@media only screen and (max-width: 768px) { .page_btn li .name::after { width: 18px; height: 15px; right: 10px; } }

#footer { background-color: #962240; padding: 40px 0; color: #FFF; }
@media only screen and (max-width: 768px) { #footer { padding: 30px 0; } }
#footer #footer_inner { display: flex; flex-direction: column; align-items: center; width: 85%; max-width: 1340px; margin: 0 auto; }
#footer #footer_inner .logo { background-color: #fff; box-sizing: border-box; padding: 15px; width: 100%; max-width: 460px; margin-bottom: 15px; }
#footer #footer_inner .logo img { width: 100%; }
@media only screen and (max-width: 1024px) { #footer #footer_inner .logo { margin: 0 auto 20px; } }
#footer #footer_inner .site_title { font-size: 2.4rem; margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 1px #fff; text-align: center; }
@media only screen and (max-width: 768px) { #footer #footer_inner .site_title { width: 90%; margin-inline: auto; font-size: calc(2.0rem + 4 * (100vw - 375px)/393); } }
@media screen and (min-width: 768.2px) and (max-width: 1024px) { #footer #footer_inner .logo, #footer #footer_inner address { margin-bottom: 0 !important; }
  #footer #footer_inner address { margin: 0 15px; } }
@media only screen and (max-width: 1024px) { #footer #footer_inner { width: 90%; } }
#footer #footer_inner address { text-align: center; font-style: normal; }

.copyright { background-color: #fff; text-align: center; padding: 12px; }
@media only screen and (max-width: 768px) { .copyright { text-align: left; } }

#page_top { width: 60px; height: 60px; position: fixed; z-index: 10; right: 20px; bottom: 30px; background-color: #292828; display: none; border-radius: 30px; }
@media only screen and (max-width: 768px) { #page_top { right: 10px; bottom: 10px; width: 50px; height: 50px; } }

#page_top a { position: relative; display: block; width: 60px; height: 60px; text-decoration: none; }
@media only screen and (max-width: 768px) { #page_top a { width: 50px; height: 50px; } }

#page_top a::before { content: ""; display: block; position: absolute; width: 12px; height: 22px; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath fill='%23ffffff' d='M9.5,10.2l-7.1,7.6c-0.3,0.3-0.8,0.3-1.1,0c0,0,0,0,0,0l-1.1-1.1c-0.3-0.3-0.3-0.8,0-1.1	l5.4-5.9c0.3-0.3,0.3-0.8,0-1.1L0.2,2.5c-0.3-0.3-0.3-0.8,0-1.1l1.1-1.1c0.3-0.3,0.8-0.3,1.1,0c0,0,0,0,0,0l7.1,7.6	C10.2,8.5,10.2,9.5,9.5,10.2z'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat; background-size: contain; right: 0; left: 0; top: 0; bottom: 0; margin: auto; transform: rotateZ(270deg); }
@media only screen and (max-width: 768px) { #page_top a::before { width: 10px; height: 18px; } }

/*fade*/
.fade, .frip, .zoom { opacity: 0; }

.delay-time03 { animation-delay: 0.3s; }

.delay-time05 { animation-delay: 0.5s; }

.delay-time07 { animation-delay: 0.7s; }

.fadeUp { animation-name: fadeUpAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; }

@keyframes fadeUpAnime { from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); } }
.flipLeftTop { animation-name: flipLeftTopAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; }

@keyframes flipLeftTopAnime { 0% { transform: translate(-20px, 80px) rotate(-15deg); opacity: 0; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; } }
.zoomIn { animation-name: zoomInAnime; animation-duration: 0.5s; animation-fill-mode: forwards; }

@keyframes zoomInAnime { 0% { transform: scale(0.6); opacity: 0; }
  90% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; } }
.fadeRight { animation-name: fadeRightAnime; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; }

@keyframes fadeRightAnime { from { opacity: 0; transform: translateX(200px); }
  to { opacity: 1; transform: translateX(0); } }