@charset "UTF-8";

/* Reset
------------------------------------------------------------------*/
* {
 box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption,
article,
section,
nav,
header,
footer {
 margin: 0;
 padding: 0;
 font-weight: normal;
 font-style: normal;
}

html * {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

body {
 width: 100%;
 font-family: "NotoSansCJKjp", sans-serif;
 font-weight: 400;
 background-color: #fff;
 background-size: 20% auto;
 background-position: bottom 7vw left 5vw;
}

html {
 overflow-y: scroll;
 font-size: 16px;
 color: #666;
 scroll-behavior: smooth;
}

/* Basic elements
------------------------------------------------------------------*/
img {
 border: none;
 width: 100%;
 height: auto;
 vertical-align: bottom;
}

ul,
ol {
 list-style: none;
 list-style-position: inside;
}

dl {
 margin: 0px;
}

dl dt {
 margin: 0px;
}

table {
 border-collapse: collapse;
 border-spacing: 0px;
 empty-cells: show;
}

p {
 margin: 0;
}

ul,
ol,
dl {
 list-style-position: outside;
}

/* Base Link
------------------------------------------------------------------*/
a {
 color: #005bac;
 text-decoration: none;
}

a:hover {
 color: #005bac;
 text-decoration: none;
}

a:active,
a:focus {
 outline: none;
}

/* Font
------------------------------------------------------------------*/
/* type */
h1,
h2,
h3,
h4,
h5,
h6 {
 font-weight: 700;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
 font-weight: 700;
}

table th,
table td {
 vertical-align: top;
 text-align: left;
}

/* リンク */
a:hover img.hover,
span:hover img.hover {
 opacity: 0.7;
 filter: alpha(opacity=70);
}

figure img {
 vertical-align: bottom;
}

/* header ___________________ */

header {
 margin: 0px;
 padding: 0px;
 min-height: 70px;
}

header img {
 max-width: 228px;
 height: auto;
 margin-top: 10px;
}

.top {
 margin: 0px auto;
 padding: 0px;
 width: 100%;
 height: auto;
 max-width: 1200px;
}

/* main ___________________ */
main {
 margin: 90px 0px;
 padding: 0px;
}

main p {
 margin: 0px;
 padding: 0px;
 font-size: clamp(0.875rem, 0.806rem + 0.34vw, 1rem);
 line-height: 2em;
 letter-spacing: 0.1em;
}

.text-bottom {
 text-align: right;
 margin: 2em 0px 90px;
 border-bottom: 1px #666 solid;
 padding-bottom: 90px;
}

.text {
 margin: 0px auto;
 padding: 0px;
 width: 100%;
 max-width: 845px;
}

.mov {
 margin: 0px auto;
 padding: 0px;
 width: 100%;
 max-width: 845px;
}

.mov h2 {
 margin: 0px 0px 40px;
 padding: 0px;
 font-size: clamp(0.875rem, 0.668rem + 1.03vw, 1.25rem);
 letter-spacing: 0.1em;
 text-align: center;
}

.mov p {
 margin: 0px 0px 40px;
}

.banner {
 margin: 0px auto;
 padding: 0px;
 width: 100%;
 max-width: 845px;
 text-align: center;
}

.banner img {
 margin: 0px auto;
 padding: 0px;
 width: 100%;
 height: auto;
 max-width: 490px;
}

.banner p {
 margin: 0px auto 5px;
 font-size: 14px;
 line-height: 1.5em;
 letter-spacing: 0.1em;
}

.mov iframe {
 margin: 0px 0px 40px;
 width: 100%;
 height: auto;
 aspect-ratio: 16 / 9;
 display: block;
}

footer p {
 margin: 0px;
 padding: 1em 0px;
 font-size: clamp(0.875rem, 0.806rem + 0.34vw, 1rem);
 line-height: 2em;
 letter-spacing: 0.1em;
 color: #fff;
 font-weight: normal;
}

small {
 margin: 0px;
 padding: 0px;
 font-size: 14px;
 line-height: 2em;
 letter-spacing: 0.1em;
 color: #fff;
 font-weight: 300;
 text-align: right;
 display: block;
}

/* グリッド ___________________ */

body {
 display: grid;
 grid-template-columns: [left] 1fr [mainL] max(1200px) [mainR] 1fr [right];
 grid-template-rows: [head] auto [top] auto [main] auto [foot] auto [bottom];
}

.wrapper {
 grid-column-start: left;
 grid-column-end: right;
 grid-row-start: top;
 grid-row-end: main;
 display: grid;
 grid-template-columns: [wraLeft] 1fr [wraML] max(1200px) [wraMR] 1fr [wraRight];
 grid-template-rows: [wraTop] auto [wraBottom];
 position: relative;
 width: 100%;
}

.wrapper h1 {
 margin: 0px;
 padding: 0px;
 color: #fff;
 position: absolute;
 top: 45%;
 transform: translateY(-50%);
 left: 50%;
 transform: translateX(-50%);
 font-size: clamp(0.875rem, 0.116rem + 3.79vw, 2.25rem);
 letter-spacing: 0.1em;
 text-align: center;
}

.wrapper .top {
 grid-column-start: wraML;
 grid-column-end: wraMR;
 grid-row-start: wraTop;
 grid-row-end: wraBottom;
}

.wrapper .topBox {
 grid-column-start: wraLeft;
 grid-column-end: wraRight;
 grid-row-start: wraTop;
 grid-row-end: wraBottom;
 background-color: rgba(0, 0, 0, 0.2);
}

main {
 grid-column-start: mainL;
 grid-column-end: mainR;
 grid-row-start: main;
 grid-row-end: foot;
}

header {
 grid-column-start: mainL;
 grid-column-end: mainR;
 grid-row-start: head;
}

footer {
 grid-column-start: mainL;
 grid-column-end: mainR;
 grid-row-start: foot;
 background-color: #da600d;
}

.footerL {
 grid-column-start: left;
 grid-column-end: mainL;
 grid-row-start: foot;
 grid-row-end: bottom;
 background-color: #da600d;
}

.footerR {
 grid-column-start: mainR;
 grid-column-end: right;
 grid-row-start: foot;
 grid-row-end: bottom;
 background-color: #da600d;
}

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

 body {
  grid-template-columns: [left] 10px [mainL] auto [mainR] 10px [right];
 }

 .wrapper {
  grid-template-columns: [wraLeft] 1fr [wraML] auto [wraMR] 1fr [wraRight];
 }

 main {
  margin: 40px 0px;
 }

}