@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* ===================================================================
CSS information
 file name  :  normalize.css
 style info :  normalizeスタイル
=================================================================== */
/* -----------------------------------------
Normalize
----------------------------------------- */
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  font-size: 62.5%;
  letter-spacing: 0.035em;
}
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
	margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}
/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template, /* 1 */
[hidden] {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
  max-width: 100%;
  display: block;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: 600;
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* -----------------------------------------
Common
----------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
	display: block;
}
audio,canvas,video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
audio:not([controls]) {
	display: none;
}
[hidden] {
	display: none;
}
/*code,kbd,pre,samp {
	_font-family: 'courier new',monospace;
}
*/
pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}
q {
	quotes: none;
}
q:before,q:after {
	content: '';
	content: none;
}
menu,ol,ul {
	margin: 0;
}
li {
	list-style: none;
}
dd {
	margin: 0;
}
menu,ol,ul {
	padding: 0;
}
nav,ul,ol {
	list-style: none;
	list-style-image: none;
}
img {
	-ms-interpolation-mode: bicubic;
}
form {
	margin: 0;
}
legend {
	white-space: normal;
	*margin-left: -7px;
}
button,input,select {
	vertical-align: baseline;
}
button,input,select,textarea {
	font-size: 100%;
	*vertical-align: middle;
}
button {
	line-height: normal;
}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
	*overflow: visible;
}
input[type="checkbox"],input[type="radio"] {
	*height: 13px;
	*width: 13px;
}
textarea {
	vertical-align: top;
}
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
	display: block;
}
audio,canvas,progress,video {
	display: inline-block;
	vertical-align: baseline;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
[hidden],template {
	display: none;
}
a {
	background: 0 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;

	/*  &:hover {
	 	opacity: 0.7;

	 	@include mq(sp) {
	 		opacity: 1;
	 	}
	 } */
}
a:active,a:hover {
	outline: 0;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b {
	font-weight: 700;
}
mark {
	background: #ff0;
	color: #000;
}
sub,sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -.5em;
}
sub {
	bottom: -.25em;
}
img {
	border: 0;
}
svg:not(:root) {
	overflow: hidden;
}
hr {
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
}
pre {
	overflow: auto;
}
code,kbd {
	font-size: 1em;
}
pre {
	font-family: monospace,monospace;
}
pre,samp {
	font-size: 1em;
}
button,input,optgroup,select,textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}
button {
	overflow: visible;
}
button,select {
	text-transform: none;
}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled],html input[disabled] {
	cursor: default;
}
button::-moz-focus-inner,input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
input {
	line-height: normal;
}
input[type="checkbox"],input[type="radio"] {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
fieldset {
	border: 1px solid silver;
}
legend {
	border: 0;
	padding: 0;
}
textarea {
	overflow: auto;
}
optgroup {
	font-weight: 700;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	-webkit-font-kerning: normal;
	-moz-font-kerning: normal;
	-ms-font-kerning: normal;
	-o-font-kerning: normal;
	font-kerning: normal;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	width: 100%;
	height: 100%;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}
h1,h2,h3,h4,h5,h6,body,p,pre,blockquote,figure,dl,dl dt,dl dd {
	margin: 0;
	padding: 0;
}
a:link:focus {
	outline: none;
}
[contenteditable]:focus,img:focus,map area:focus {
	outline: none;
}
th,td,fieldset {
	padding: 0;
}
fieldset {
	margin: 0;
}
html {
	color: #000;
	font-family: var(--font-family-primary);
	font-size: 62.5%;
	line-height: 1.5;

	&[lang="en-US"]{
		font-family: var(--font-family-secondary);
	}
}
hr {
	display: block;
	width: 100%;
	height: 1px;
	border: 0 none;
}
a:link,a:visited {
	/* color: #000; */
	text-decoration: none;
}
a:hover,a:focus {
	/* color: #000; */
}
a:active {
	/* color: #000; */
}
a:focus {
	outline: none;
}
em {
	font-style: normal;
}
em,strong {
	font-weight: 700;
}
small {
	font-size: .8em;
}
cite {
	font-weight: 700;
	font-style: normal;
}
cite:before {
	content: '『';
	font-weight: 400;
}
cite:after {
	content: '』';
	font-weight: 400;
}
q:before {
	content: '❝';
}
q:after {
	content: '❞';
}
dfn {
	font-weight: 700;
	font-style: normal;
}
code {
	margin: 0 2px;
	padding: 3px 5px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 3px;
	background: rgba(0,0,0,.025);
}
samp {
	color: #fff;
	background: rgba(0,0,0,.9);
}
samp,kbd {
	margin: 0 2px;
	padding: 3px 5px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 3px;
}
kbd {
	background: rgba(0,0,0,.025);
}
kbd kbd {
	display: inline-block;
	font-weight: 700;
	line-height: 1;
	margin: 1px;
	padding: 1px 10px;
	border: 1px solid rgba(0,0,0,.6);
	background: #eee;
	-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.5)inset,-1px -1px 1px rgba(0,0,0,.5)inset;
	        box-shadow: 1px 1px 1px rgba(255,255,255,.5)inset,-1px -1px 1px rgba(0,0,0,.5)inset;
}
pre code {
	display: block;
	padding: 5px 10px;
}
pre kbd {
	display: block;
	color: #fff;
}
pre kbd:after {
	content: '|';
	opacity: .6;
}
pre kbd kbd {
	color: #000;
	display: inline;
	background: #eee;
}
pre kbd kbd:after {
	display: none;
}
pre samp {
	display: block;
	padding: 5px 10px;
}
var {
	font-family: serif;
	font-weight: 700;
	margin: 0 2px;
	padding: 3px 5px;
	border-radius: 3px;
	background: rgba(0,0,0,.025);
}
* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
img {vertical-align: bottom;}
@media only screen and (max-width: 736px) {
	img{
		max-width: 100%;
		height: auto;
	}
}
html,
body {
	height: 100%;
}
ul, ol, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
p {
    font-weight: 300;
}
/* ===================================================================
  CSS information
  file name  :  color.css
=================================================================== */
:root {
    /* サイトで最も明るい色 */
    --color-lightest: #fff;

    /* サイトで最も暗い色 */
    --color-darkest: #000;

    /* 背景カラー */
    --color-bg01: #fff;
    /* --color-bg02: #ebf0f4; */
    --color-bg-footer: #f9f7ef;

    /* メインカラー */
    --color-primary: #008F58;
    /* --color-secondary: #ebf0f4; */

    /* アクセントカラー */
    --color-accent: #E7ED02;

    /* 警告カラー */
    --color-warning: #df3122;

    /* テキストカラー */
    --color-text: #1a1a1a;

    /* グレイカラー */
    --color-gray01: #8da5ba;
    --color-gray02: #f5f5f5;
    --color-gray03: #e0e0e0;

    /* 透明カラー */
    --color-alpha01: rgba(255, 255, 255, .9);
    --color-alpha02: rgba(0, 0, 0, .1);
    --color-alpha03: rgba(255, 255, 255, .4);

    /* グラデーションカラー */
    /* --gradient01: linear-gradient(-79deg,rgba(49, 83, 115, .9) 4%, rgba(99, 137, 173, .9) 100%);
    --gradient02: linear-gradient(0deg,rgba(141, 16, 56, .9) 17%, rgba(160, 26, 69, .9) 62%, rgba(160, 26, 69, .9) 100%);
    --gradient03: linear-gradient(0deg,rgba(140, 78, 15, .9) 17%, rgba(161, 93, 26, .9) 62%, rgba(161, 93, 26, .9) 100%); */

    /* ドロップシャドウカラー */
    /* --shadow01: 0 0 10px 2px #d6d6d6;
    --shadow02: 0px 4px 6px 0px rgba(0, 0, 0, 0.16);
    --shadow03: 5px 5px 6px 0px rgba(0, 0, 0, 0.08);
    --shadow04: 0px 0px 8px 4px rgba(0, 0, 0, 0.05);
    --shadow05: 0px 4px 4px 0px rgba(0, 0, 0, 0.16); */
}
/* ===================================================================
  CSS information
  file name  :  dimension.css
=================================================================== */
:root {
    /* メインwidth */
    --width-main: min(750px, 100%);

    /* メインmargin */
    --margin-main: 0 auto;
    /* 親要素ぶち抜き */
    --margin-not-parent: 0 min(calc(-15 / 750 * 100vw), -15px);

    /* メインpadding */
    --padding-main: 0 min(calc(25 / 750 * 100vw), 25px);
}
/* ブレイクポイント */
/* ===================================================================
  CSS information
  file name  :  fonts.css
=================================================================== */
/* Googleフォント読み込み */
/* LINEフォント読み込み */
@font-face {
  font-family: 'LINE Seed JP';
  src: url('../fonts/LINESeedJP_OTF_Rg.woff2') format('woff2'),
      url('../fonts/LINESeedJP_OTF_Rg.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LINE Seed JP';
  src: url('../fonts/LINESeedJP_OTF_Bd.woff2') format('woff2'),
      url('../fonts/LINESeedJP_OTF_Bd.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
    /* フォントファミリー */
    --font-family-primary: "LINE Seed JP", sans-serif;
    --font-family-secondary: "Montserrat", "LINE Seed JP", sans-serif;

    /* フォントサイズ */
  	--font-size-text: min(calc(30 / 750 * 100vw), 3rem);

    /* フォントウェイト */
    --weight-extra-light: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semi-bold: 600;
    --weight-bold: 700;
    --weight-extra-bold: 800;
    --weight-black: 900;
}
/* ===================================================================
  CSS information
  file name  :  common.css
=================================================================== */
* {-webkit-box-sizing: border-box;box-sizing: border-box;}
body {
  font-family: var(--font-family-primary);
  color: var(--color-text);
}
h1 {
  font-size: 4.0rem;
}
a {
  -webkit-transition: all 300ms;
  transition: all 300ms;
  font-weight: var(--weight-regular);
  color: var(--color-text);

  &:hover {
    /* opacity: .7; */
  }
}
img {
  max-width: 100%;
  height: auto;
}
h3, h4, h5, h6, p, dt, dd {
  letter-spacing: .05em;
}
p {
  font-weight: var(--weight-regular);
}
main {
  display: block;
  padding-bottom: min(calc(200 / 1200 * 100vw), 200px);

  .column2 & {
    width: min(calc(650 / 1200 * 100vw), 650px);

    @media only screen and (max-width: 750px) {
      width: 100%;
    }
  }
}
/* PC時にtel無効 */
@media only screen and (min-width: 961px) {
  a[href^="tel:"] {
      pointer-events: none;
  } 
}
/* PC/SP出し分け */
.pc-only {
  display: block!important;

  @media only screen and (max-width: 750px) {
    display: none!important;
  }
}
.tab-sp-only {
  display: none!important;

  @media only screen and (max-width: 960px) and (min-width: 751px) {
    display: block!important;
  }
}
.sp-only {
  display: none!important;

  @media only screen and (max-width: 750px) {
    display: block!important;
  }
}
/* ===================================================================
  CSS information
  file name  :  header.css
=================================================================== */
header.main-header {
	background-color: var(--color-alpha01);
  	width: 100%;
	height: min(calc(125 / 1200 * 100vw), 125px);
	position: relative;
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-transition: top .5s;
	transition: top .5s;
	border-bottom: var(--color-gray03) solid 1px;

	@media only screen and (max-width: 750px) {
		height: calc(100 / 750 * 100vw);
	}

	.home & {
		border-bottom: none;
	}

  .active & {
  	background-color: var(--color-lightest);
  }

	.inner {
		width: 100%;
		max-width: 1200px;
		padding: 0 40px;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;

		@media only screen and (max-width: 750px) {
			padding: 0 20px;
		}
	}

	h1 {
		position: relative;
		width: min(calc(151 / 1200 * 100vw), 151px);

		@media only screen and (max-width: 750px) {
			width: calc(180 / 750 * 100vw);
		}

		a {
			color: var(--color-lightest);

			@media only screen and (max-width: 750px) {
				background-size: 115px 30px;
			}
		}
	}

	nav {
		ul {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			-webkit-box-pack: start;
			    -ms-flex-pack: start;
			        justify-content: flex-start;
			gap: min(calc(70 / 1200 * 100vw), 70px);

			@media only screen and (max-width: 750px) {
				display: block;
			}

			li {
				font-size: min(calc(18 / 1200 * 100vw), 1.8rem);
				font-family: var(--font-family-secondary);
				font-style: italic;
				line-height: 1.7;
				letter-spacing: 0;
				text-align: center;

				@media only screen and (max-width: 750px) {
					margin-left: 0;
				}

				a {
					color: var(--color-text);
					font-weight: var(--weight-semi-bold);
					display: block;

					span {
						display: block;
						font-family: var(--font-family-primary);
						font-size: min(calc(12 / 1200 * 100vw), 1.2rem);
						font-style: normal;
						font-weight: normal;

						@media only screen and (max-width: 750px) {
							font-size: 1.2rem;
						}
					}

					&:hover {
						color: var(--color-primary);
					}
				}
			}
		}

		&#nav {
			@media only screen and (max-width: 750px) {
				z-index: 1;
				position: absolute;
				left: 0;
				top:0;
				width: 100%;
			}

			#dl-menu_recruit .dl-trigger {
				z-index: 3;
			}
		}
	}
}
body#form #gnav,
body#form .navToggle{
	display: none;
}
@media only screen and (max-width: 750px) {
	.fa-bars::before {
		content: "";
	}
}
/* ===================================================================
  CSS information
  file name  :  footer.css
=================================================================== */
/* ---------------------------
footer
--------------------------- */
footer {
  width: 100%;
  height: 400px;
  background-color: var(--color-darkest);
  color: var(--color-lightest);
  padding: 100px 0;

  @media only screen and (max-width: 750px) {
    height: auto;
    padding: 40px 0;
  }

  a {
    color: var(--color-lightest);
    -webkit-transition: all 300ms;
    transition: all 300ms;

      &:hover {
        opacity: .7;
      }
  }

  .inner_footer {
    width: 100%;
    max-width: 1060px;
    padding: 0 30px;
    margin: 0 auto;
    position: relative;

    .footer_contents {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: min(calc(70 / 1200 * 100vw), 70px);

      @media only screen and (max-width: 750px) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }

      .footer_information {
        width: min(calc(350 / 1200 * 100vw), 350px);

        @media only screen and (max-width: 750px) {
          width: 100%;
        }

        h1 {
          width: min(calc(250 / 1200 * 100vw), 250px);
          margin-bottom: 70px;

          @media only screen and (max-width: 750px) {
            width: calc(300 / 750 * 100vw);
            margin-bottom: 30px;
          }
        }

        .address {
          font-size: 1.4rem;
          line-height: 2;
          margin-bottom: 25px;

          @media only screen and (max-width: 750px) {
            font-size: calc(25 / 750 * 100vw);
            margin-bottom: 0;
          }
        }
      }

      .footer_menu {
        width: min(calc(600 / 1200 * 100vw), 600px);
        margin-top: -5px;

        @media only screen and (max-width: 750px) {
          width: 100%;
          margin: 0 auto 60px;
        }

        nav {
          ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: min(calc(36 / 1200 * 100vw), 36px);
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;

            @media only screen and (max-width: 750px) {
              -webkit-box-orient: vertical;
              -webkit-box-direction: normal;
                  -ms-flex-direction: column;
                      flex-direction: column;
            }

            li {
              font-family: var(--font-family-secondary);
              font-size: 1.8rem;
              font-weight: var(--weight-bold);
              font-style: italic;
              line-height: 2;

              span {
                font-family: var(--font-family-primary);
                font-size: 1.0rem;
                font-weight: var(--weight-regular);
                font-style: normal;
                display: block;

                @media only screen and (max-width: 750px) {
                  padding-left: 1em;
                  display: inline;
                }
              }

              a {
                display: block;
              }
            }
          }
        }
      }
    }

    .copyright {
      font-size: 1.1rem;
      line-height: 1;

      @media only screen and (max-width: 750px) {
        text-align: center;
      }
    }

    .footer_sns {
      width: 40px;
      height: 40px;
      position: absolute;
      right: 0;
      bottom: 0;

      @media only screen and (max-width: 750px) {
        width: calc(70 / 750 * 100vw);
        height: calc(70 / 750 * 100vw);
        right: calc(60 / 750 * 100vw);
        top: 0;
      }
    }
  }
}
/* ===================================================================
  CSS information
  file name  :  nav-global.css
=================================================================== */
/*--------------------------------
ハンバーガーメニュー
--------------------------------*/
@media only screen and (max-width: 750px) {
	/* ハンバーガーメニューカスタム */
	.dl-menuwrapper {
		.dl-menu {
			-webkit-transform: translateY(-100%);
			        transform: translateY(-100%);
			-webkit-transition: all 0.5s;
			transition: all 0.5s;
			margin: 40px 0 0;
			position: absolute;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			opacity: 0;
			pointer-events: none;
			-webkit-backface-visibility: hidden;
			        backface-visibility: hidden;
			z-index: 9999;

			@media only screen and (max-width: 750px) {
				margin-top: calc(100 / 750 * 100vw);
			}

			&.dl-menu-toggle {
				-webkit-transition: all .3s ease;
				transition: all .3s ease;
			}

			&.active {
				opacity:1;
				pointer-events:auto;
				-webkit-transform:translateY(0);
				        transform:translateY(0);
			}

			ul {
				border-top: var(--color-primary) solid 1px;

				li {
					border-bottom: var(--color-primary) solid 1px;
					position: relative;
					background-color: var(--color-lightest);

					a {
						position: relative;
						display: block;
						padding: 10px;
						color: var(--color-text);
						vertical-align: middle;
						text-decoration: none;
						font-size: 15px;

						/* &::before, &::after {
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							margin: auto;
							content: "";
							vertical-align: middle;
						}

						&::before {
							left: 10px;
							width: 4px;
							height: 4px;
							border-top: 1px solid var( --color-gray01);
							border-right: 1px solid var( --color-gray01);
							transform: rotate(45deg);
						} */
					}
				}
			}
		}
	}

	/* ハンバーガーメニュー */
	.navToggle {
		display: block;
		position: absolute;  /* bodyに対しての絶対位置指定 */
		right: 4px;
		top: 5px;
		width: 40px;
		height: 40px;
		cursor: pointer;
		z-index: 3;
		text-align: center;

		@media only screen and (max-width: 750px) {
			top: calc(11 / 750 * 100vw);
		}

		span {
			display: block;
			position: absolute;  /* .navToggleに対して */
			width: 30px;
			border-bottom: solid 3px var(--color-primary);
			-webkit-transition: .35s ease-in-out;
			transition: .35s ease-in-out;
			left: 6px;

			&:nth-child(1) {
				top: 9px;
			}

			&:nth-child(2) {
				top: 18px;
			}

			&:nth-child(3) {
				top: 27px;
			}

			&:nth-child(4) {
				border: none;
				color: var(--color-primary);
				font-size: 9px;
				font-weight: bold;
				top: 34px;
			}
		}

		&.active {
			span {
				/* 最初のspanをマイナス45度に */
				&:nth-child(1) {
					top: 18px;
					left: 6px;
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
				}
				/* 2番目と3番目のspanを45度に */
				&:nth-child(2),&:nth-child(3)  {
					top: 18px;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}
		}
	}

	/* 展開時に背景に色をつける。 */
	body {
		background: none;
	
		&::before {
			content:"";
			display:block;
			position:fixed;
			top:0;
			left:0;
			z-index:-1;
			width:100%;
			height:100vh;
		  }

		/* 展開時にコンテンツ部分をスクロールできないようにする。 */
		&.active {
			position: fixed;
			width: 100vw;
		}
	
		/* 展開時に背景をグレーにする。 */
		&.active::before {
			background-color: rgba(0,0,0,0.60);
			z-index:100;
		}
	}
}
/* ===================================================================
  CSS information
  file name  :  hero.css
=================================================================== */
.hero {
  width: 100%;
  height: min(calc(450 / 1200 * 100vw), 450px);
  margin-top: min(calc(125 / 1200 * 100vw), 125px);
  margin-bottom: min(calc(100 / 1200 * 100vw), 100px);
  position: relative;
  z-index: 1;
  overflow: hidden;

  @media only screen and (max-width: 750px) {
    margin-top: calc(100 / 750 * 100vw);
    height: calc(450 / 750 * 100vw);
  }

  >img {
    width: 100%;
    height: min(calc(450 / 1200 * 100vw), 450px);
    -o-object-fit: cover;
       object-fit: cover;

    @media only screen and (max-width: 750px) {
      height: calc(450 / 750 * 100vw);
    }
  }

  .hero-topic {
    position: absolute;
    bottom: min(calc(50 / 1200 * 100vw), 50px);
    right: calc(100 / 1200 * 100vw);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    @media only screen and (max-width: 750px) {
      bottom: calc(30 / 750 * 100vw);
      right: calc(20 / 750 * 100vw);
    }

    .hero-topic_tag {
      font-size: 1.4rem;
      font-weight: var(--weight-semi-bold);
      line-height: 1;
      color: var(--color-accent);
      background-color: var(--color-primary);
      display: inline-block;
      padding: 6px 24px;

      .topics & {
        color: var(--color-text);
        background-color: var(--color-accent);
      }

      span {
        font-family: var(--font-family-secondary);
        font-style: italic;
      }

      @media only screen and (max-width: 750px) {
        font-size: calc(24 / 750 * 100vw);
        padding: 4px 12px;
      }
    }

    .hero-topic_title {
      font-size: min(calc(32 / 1200 * 100vw), 3.2rem);
      font-weight: var(--weight-bold);
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      gap: 10px;

      @media only screen and (max-width: 750px) {
        font-size: calc(32 / 750 * 100vw);
        gap: calc(10 / 750 * 100vw);
      }

      span {
        display: inline;
        background:-webkit-gradient(linear, left top, left bottom, to(var(--color-lightest)));
        background:linear-gradient(var(--color-lightest) 100%);
        padding: 8px 10px;
        line-height: 1;

        @media only screen and (max-width: 750px) {
          gap: calc(10 / 750 * 100vw);
        }
      }
    }
  }

  &.short {
    width: 100%;
    height: min(calc(310 / 1200 * 100vw), 310px);
    margin-top: min(calc(125 / 1200 * 100vw), 125px);
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    @media only screen and (max-width: 750px) {
      margin-top: min(calc(100 / 750 * 100vw), 100px);
      margin-bottom: 20px;
    }

    .inner_hero {
      width: min(calc(1000 / 1200 * 100vw), 1000px);
      margin: 0 auto;

      @media only screen and (max-width: 750px) {
        width: 100%;
        padding: 0 20px;
      }

      .news & {
        width: min(calc(800 / 1200 * 100vw), 800px);

        @media only screen and (max-width: 750px) {
          width: 100%;
       }
      }
    }

    h2 {
      font-family: var(--font-family-secondary);
      font-size: min(calc(80 / 1200 * 100vw), 8.0rem);
      font-weight: var(--weight-black);
      font-style: italic;
      line-height: 1.5;

      @media only screen and (max-width: 750px) {
        font-size: 4.0rem;
      }

      span {
        font-family: var(--font-family-primary);
        font-size: min(calc(16 / 1200 * 100vw), 1.6rem);
        font-style: normal;
        display: block;

        @media only screen and (max-width: 750px) {
          font-size: 1.2rem;
        }
      }
    }
  }

  &.news-title-container {
    width: 100%;
    height: 300px;
    margin-bottom: 60px;
    padding-top: 60px;

    @media only screen and (max-width: 750px) {
      height: auto;
      padding-top: calc(60 / 750 * 100vw);
    }

    .inner-news-title-container {
      width: min(calc(800 / 1200 * 100vw), 800px);
      height: 100%;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;

       @media only screen and (max-width: 750px) {
        width: 100%;
        /* margin: 0 20px; */
        padding: 0 20px;
       }

      .news-date {
        font-family: var(--font-family-secondary);
        font-size: 2.6rem;
        font-weight: var(--weight-black);
        font-style: italic;

        @media only screen and (max-width: 750px) {
          font-size: min(calc(40 / 750 * 100vw), 4rem);
          margin-bottom: 20px;
        }

        span {
          font-family: var(--font-family-primary);
          font-size: 1.6rem;
          font-weight: var(--weight-bold);
          font-style: normal;
          padding-left: 60px;
          position: relative;

          @media only screen and (max-width: 750px) {
            font-size: min(calc(32 / 750 * 100vw), 3.2rem);
            padding-left: calc(60 / 750 * 100vw);
          }

          &::before {
            position: absolute;
            top: 50%;
            left: 30px;
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
            content: "";
            width: 1px;
            height: 30px;
            background-color: var(--color-darkest);

            @media only screen and (max-width: 750px) {
              left: calc(30 / 750 * 100vw);
            }
          }
        }
      }

      h2 {
        font-size: 3.2rem;
        font-weight: var(--weight-bold);
        line-height: 1.75;

        @media only screen and (max-width: 750px) {
          font-size: min(calc(50 / 750 * 100vw), 5rem);
        }

      }
    }
  }

  .home & {
    display: block;
    height: calc(100vh - min(calc(125 / 1200 * 100vw), 125px));
    margin-bottom: 0;

    @media only screen and (max-width: 750px) {
      height: calc(1000 / 750 * 100vw);
    }
  }
}
/* ---------------------------
slider
--------------------------- */
.slider_container {
  width: 100%;
  height: 100%;

  .slick-prev {
    left: 25px;
    z-index: 1;
  }

  .slick-next {
    right: 25px;
  }

  .slider_item {
    position: relative;
    width: 100%;
    height: 100%;

    @media only screen and (max-width: 750px) {
      height: calc(1000 / 750 * 100vw);
    }

    img {
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
      height: 100vh;

      @media only screen and (max-width: 750px) {
        height: 100%;
      }
    }

    .slider_item-topic {
      position: absolute;
      bottom: min(calc(250 / 1200 * 100vw), 250px);
      right: calc(80 / 1200 * 100vw);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;

      @media only screen and (max-width: 750px) {
        bottom: calc(140 / 750 * 100vw);
        right: calc(20 / 750 * 100vw);
      }

      .slider_item-topic_tag {
        font-size: 1.4rem;
        font-weight: var(--weight-semi-bold);
        line-height: 1;
        color: var(--color-accent);
        background-color: var(--color-primary);
        display: inline-block;
        padding: 6px 24px;

        span {
          font-family: var(--font-family-secondary);
          font-style: italic;
        }

        @media only screen and (max-width: 750px) {
          font-size: calc(24 / 750 * 100vw);
          padding: 4px 12px;
        }
      }

      .slider_item-topic_title {
        font-size: min(calc(32 / 1200 * 100vw), 3.2rem);
        font-weight: var(--weight-bold);
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        gap: 10px;

        @media only screen and (max-width: 750px) {
          font-size: calc(32 / 750 * 100vw);
          gap: calc(10 / 750 * 100vw);
        }

        span {
          display: inline;
          background:-webkit-gradient(linear, left top, left bottom, to(var(--color-lightest)));
          background:linear-gradient(var(--color-lightest) 100%);
          padding: 8px 10px;
          line-height: 1;

          @media only screen and (max-width: 750px) {
            gap: calc(10 / 750 * 100vw);
          }
        }
      }
    }
  }
}
/* slider_control */
.slider_control {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: min(calc(450 / 1200 * 100vw), 450px);
  height: min(calc(80 / 1200 * 100vw), 80px);
  background-color: var(--color-lightest);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-bottom: var(--color-gray03) solid 1px;

  @media only screen and (max-width: 750px) {
    width: calc(550 / 750 * 100vw);
    height: calc(100 / 750 * 100vw);
  }

  .play-box {
    width: min(calc(100 / 1200 * 100vw), 100px);

    @media only screen and (max-width: 750px) {
      width: calc(130 / 750 * 100vw);
    }

    .slick_pause {
      position: relative;
      width: 100%;
      height: 100%;
      text-indent: -9999px;
      cursor: pointer;

      &::before,
      &::after {
        position: absolute;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        content: "";
        width: 5px;
        height: 20px;
        background-color: var(--color-primary);

        @media only screen and (max-width: 750px) {
          width: calc(10 / 750 * 100vw);
          height: calc(30 / 750 * 100vw);
        }
      }

      &::before {
        left: calc(50% - 8px);

        @media only screen and (max-width: 750px) {
          left: calc(53 / 750 * 100vw);
        }
      }

      &::after {
        right: calc(50% - 8px);

        @media only screen and (max-width: 750px) {
          right: calc(42 / 750 * 100vw);
        }
      }

      &.paused {
        &::before {
            left: 50%;
            width: 30px;
            height: 20px;
            aspect-ratio: 1/cos(30deg);
            clip-path: polygon(50% 0,100% 100%,0 100%);
            -webkit-transform: translate(-50%, -50%) rotate(90deg);
                    transform: translate(-50%, -50%) rotate(90deg);
            background-color: var(--color-primary);

            @media only screen and (max-width: 750px) {
              left: 54%;
              width: calc(40 / 750 * 100vw);
              height: calc(30 / 750 * 100vw);
            }
        }

        &::after {
          display: none;
        }
      }
    }
  }

  /* dots */
  .dots-box {
    width: min(calc(250 / 1200 * 100vw), 250px);
    border: var(--color-primary) solid;
    border-width: 0 1px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    @media only screen and (max-width: 750px) {
      width: calc(330 / 750 * 100vw);
    }

    .dots-wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: min(calc(20 / 1200 * 100vw), 20px);

      @media only screen and (max-width: 750px) {
        gap: calc(25 / 750 * 100vw);
      }

      li {
        button {
          font-size: 0;
          line-height: 0;
          display: block;
          cursor: pointer;
          border: 0;
          outline: none;
          width: min(calc(120 / 1200 * 100vw), 20px);
          height: min(calc(6 / 1200 * 100vw), 6px);
          background-color: var(--color-gray03);
          border-radius: 100vh;
          -webkit-transition: all 300ms;
          transition: all 300ms;

          @media only screen and (max-width: 750px) {
            width: calc(35 / 750 * 100vw);
            height: calc(10 / 750 * 100vw);
          }
        }

        &.slick-active {
          button {
            -webkit-transform: scale(1.3);
                    transform: scale(1.3);
            background-color: var(--color-primary);
          }
        }
      }
    }
  }

/* arrow */
.arrow-box {
  width: min(calc(100 / 1200 * 100vw), 100px);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(calc(16 / 1200 * 100vw), 16px);

  @media only screen and (max-width: 750px) {
    width: calc(130 / 750 * 100vw);
    gap: calc(10 / 750 * 100vw);
  }

  .slide-arrow {
    width: 16px;
    height: 16px;
    position: relative;

    @media only screen and (max-width: 750px) {
      width: calc(24 / 750 * 100vw);
      height: calc(30 / 750 * 100vw);
    }

      &::after {
          position: absolute;
          content: "";
          width: 10px;
          height: 10px;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          border: 1px solid var(--color-primary);
          border-width: 1px 1px 0 0;
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg);

          @media only screen and (max-width: 750px) {
            width: calc(25 / 750 * 100vw);
            height: calc(25 / 750 * 100vw);
          }
      }

    &.prev-arrow,
    &.next-arrow {
      cursor: pointer;
    }

    &.prev-arrow {
      &::after {
          -webkit-transform: rotate(225deg);
                  transform: rotate(225deg);
      }
    }
    &.next-arrow {
      &::after {
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg);
      }
    }
  }
}

}
/* ===================================================================
  CSS information
  file name  :  form.css
=================================================================== */
/* ---------------------------
contact
--------------------------- */
.contact-container {
  width: min(calc(800 / 1200 * 100vw), 800px);
  margin: 0 auto;

  @media only screen and (max-width: 750px) {
    width: 100%;
    padding: 0 20px;
  }
}
/* ---------------------------
input
--------------------------- */
.form-area {
    width: 100%;
    margin: 0;

    @media only screen and (max-width: 750px) {
        width: 100%;
    }

    a {
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }

    form {
        width: 100%;
        margin: 0 auto;
        padding-top: 15px;

        @media only screen and (max-width: 750px) {
            width: calc(100% + 70px);
            margin: 0 -35px;
        }
    }

    .form-field {
        margin-bottom: 0!important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: 30px;

        @media only screen and (max-width: 750px) {
            gap: 10px;
        }

        p {
            margin-bottom: 10px;
        }

        dt {
            float: none!important;
            width: 160px;
            margin-bottom: 7px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding-top: 1.5em;

            @media only screen and (max-width: 750px) {
                margin-bottom: 10px;
            }

            &:first-of-type {
              -webkit-box-align: start;
                  -ms-flex-align: start;
                      align-items: flex-start;
              padding-top: 0;
            }

            &:last-of-type {
              -webkit-box-align: center;
                  -ms-flex-align: center;
                      align-items: center;
              padding-top: 0;

              @media only screen and (max-width: 1184px) {
                  padding-top: 1.5em;
              }
            }

            p {
                font-size: 1.4rem;
                font-weight: var(--weight-bold);
                line-height: 1.4;
                margin-bottom: 0;

                span {
                    font-size: 1.2rem;
                    font-weight: var(--weight-bold);
                    line-height: 1;
                    display: inline-block;
                    padding: 6px;
                    color: var(--color-lightest);
                    border-radius: 2px;
                    margin-right: 10px;

                    &.required {
                      background-color: var(--color-warning);
                    }
                    &.any {
                      background-color: var(--color-gray03);
                    }
                }
            }
        }

        dd {
            width: 600px;
            font-size: 1.4rem;
            font-weight: 300;
            text-align: left;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            gap: 0 10px;
            margin-bottom: 10px!important;
            padding-left: 0!important;

            @media only screen and (max-width: 1184px) {
                width: 100%;
            }

            @media only screen and (max-width: 960px) and (min-width: 751px) {
                width: 100%;
            }

            @media only screen and (max-width: 750px) {
                font-size: 1.4rem;
                min-height: calc(94 / 750 * 100vw);
                width: 100%;
            }

            &:last-of-type {
                margin-bottom: 0;
            }

            &.privacy {
                width: 100%;
                text-align: center;

                p {
                    font-size: 1.4rem;
                    font-weight: 400;
                }
            }

            >p {
                width: 100%;
                margin-bottom: 0;

                .bold {
                    font-size: 1.6rem;
                    font-weight: 600;
                }

                .wpcf7-list-item-label span {
                    font-size: 1.4rem;
                    font-weight: 600;
                    color: var(--color-warning);
                }
            }

            .wpcf7-not-valid-tip {
                margin-top: 4px;
                display: inline-block;
                color: var(--color-warning);
            }
        }

        label {
            display: inline-block;
            cursor: pointer;
            line-height: 100%;
        }
    }

    input:not([type="file"]), textarea, select {
        border: var(--color-gray03) solid 1px;
        border-radius: 4px;
        background-color: var(--color-lightest);
        padding: 6px 10px;
        width: 100%;
        height: 50px;

        @media only screen and (max-width: 750px) {
            padding: 0.5em;
            width: 100%;
        }

        &[type="text"], &[type="url"], &[type="email"], &.wpcf7-textarea {
            font-size: 1.4rem;

            @media only screen and (max-width: 750px) {
                width: 100%;
                height: 50px;
            }
        }

        &:focus, &:focus-visible {
            outline: solid;
            outline-color: var(--color-primary);
        }
    }

    .wpcf7-form-control-wrap {
        &.your-file {
            margin-top: 10px;
            display: block;

            @media only screen and (max-width: 750px) {
                margin-top: 0;
            }

            input {
                width: 100%;
            }
        }

        &:has(select) {
            position: relative;
            display: block;    
    
            &::after {
                position: absolute;
                content: "";
                width: 8px;
                height: 8px;
                top: 0;
                bottom: 2px;
                right: 16px;
                margin: auto;
                border: 1px solid var(--color-darkest);
                border-width: 1px 1px 0 0;
                -webkit-transform: rotate(135deg);
                        transform: rotate(135deg);
            }
    
            select {
                -webkit-appearance: none;
                   -moz-appearance: none;
                        appearance: none;
                width: 100%;
                padding: 11px 15px;
                padding-right: 1em;
                outline: 0;
                -webkit-box-shadow: none;
                        box-shadow: none;
                text-indent: 0.01px;
                text-overflow: ellipsis;
                cursor: pointer;
    
                @media only screen and (max-width: 750px) {
                    padding: 8px 15px;
                    width: 100%;
                }
            }
        }
    }

    select {
        width: 220px;
        height: 50px;

        @media only screen and (max-width: 750px) {
            width: calc(130 / 360 * 100vw);
            height: 50px;
        }
    }

    input[type="file"]{
        font-size: 1.4rem;
        
        &:focus, &:focus-visible {
            outline: solid;
            outline-color: var(--color-primary);
        }
    }

    /* チェックボックス */
    .wpcf7-form-control  {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 19px;

        @media only screen and (max-width: 750px) {
            gap: 10px;
        }

        &:last-of-type {
            margin-bottom: 0;
        }

        .wpcf7-list-item {
            font-size: 1.4rem;
            letter-spacing: 0.06em;

            @media only screen and (max-width: 750px) {
                width: 100%;
                display: block;
                padding: 0 20px;

                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }

    input[type="checkbox"] {
        border-radius: 0;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        position: relative;
        width: 14px;
        height: 14px;
        border: 1px solid var(--color-gray01);
        border-radius: 2px;
        vertical-align: -2px;
        padding: 0;
        margin-right: 6px;

        @media only screen and (max-width: 750px) {
            width: calc(14 / 360 * 100vw);
            height: calc(14 / 360 * 100vw);
        }

        &:checked:before {
            position: absolute;
            top: 10%;
            left: 4px;
            -webkit-transform: rotate(50deg);
                    transform: rotate(50deg);
            width: 3px;
            height: 6px;
            border-right: 2px solid var(--color-primary);
            border-bottom: 2px solid var(--color-primary);
            content: '';

            @media only screen and (max-width: 750px) {
                top: 2px;
                left: 4px;
            }
        }
    }

    /* テキストエリア */
    textarea {
        width: 100%;
        min-height: 130px;
        font-size: 1.6rem;

        @media only screen and (max-width: 750px) {
            width: 100%;
            min-height: 260px;
        }
    }

    /* セレクトボックス */
    .select_container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 1.2rem;
        font-weight: 300;

        @media only screen and (max-width: 750px) {
            display: block;
            font-size: 1.2rem;
        }

        p {
            margin-right: 10px;
            display: inline-block;

            @media only screen and (max-width: 750px) {
                margin: 10px 0 4px;

                &:first-of-type {
                    margin-top: 0;
                }
            }
        }

        .form_select {
            margin-right: 24px;
        }

    }

    .form_select {
        width: 100%;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 1.4rem;

        @media only screen and (max-width: 750px) {
            height: auto;
        }

        &:not(:last-of-type) {
            @media only screen and (max-width: 750px) {
                margin-bottom: 8px;
            }
        }

        &.prefectures {
            width: 220px;

            @media only screen and (max-width: 750px) {
                width: calc(220 / 360 * 100vw);
            }
        }

        &.size {
            width: 280px;

            @media only screen and (max-width: 750px) {
                width: calc(280 / 360 * 100vw);
            }
        }

        &.inquiry {
            width: 320px;

            @media only screen and (max-width: 750px) {
                width: calc(270 / 360 * 100vw);
            }
        }

        &.quantity {
            width: 150px;

            @media only screen and (max-width: 750px) {
                width: calc(150 / 360 * 100vw);
            }
        }

        select {
            width: 100%;
            height: 50px;
            cursor: pointer;
            text-indent: 0.01px;
            text-overflow: ellipsis;
            outline: none;
            background: transparent;
            background-image: none;
            -webkit-box-shadow: none;
                    box-shadow: none;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
            padding: 1em 38px 1em 1em;
            font-size: 1.4rem;
            display: block;
            border: 1px solid var(--color-gray02);
            border-radius: 4px;
            background: var(--color-lightest);

            @media only screen and (max-width: 750px) {
                padding: 4px 38px 4px 8px;
                height: 40px;
            }

            &:focus, &:focus-visible {
                outline: solid;
                outline-color: var(--color-darkest);
            }
        }

        &:has(select) {
            &::before {
                position: absolute;
                top: 40%;
                right: 0.9em;
                width: 0;
                height: 0;
                padding: 0;
                content: '';
                border-left: 3px solid transparent;
                border-right: 3px solid transparent;
                border-bottom: 3px solid var(--color-gray01);
                pointer-events: none;
                -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
            }

            &:after {
                position: absolute;
                top: 60%;
                right: 0.9em;
                width: 0;
                height: 0;
                padding: 0;
                content: '';
                border-left: 3px solid transparent;
                border-right: 3px solid transparent;
                border-top: 3px solid var(--color-gray01);
                pointer-events: none;
                -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
            }
        }

        .error {
            right: -110px;
            bottom: 0;

            @media only screen and (max-width: 750px) {
                right: calc(-70 / 360 * 100vw);
            }
        }
    }
    
    /* ラジオボタン */
    .form_radio {
        cursor: pointer;
        padding-right: 15px;

        .vertical-item {
            display: block;
            margin-top: 15px;
            margin-bottom: 10px;
        }
    
        input[type="radio"]{
            display: none;

            &:checked {
                + span {
                    color: var(--color-primary);
            
                    &:before{
                        content: "";
                        /* background: url("/wp-content/themes/oden/img/common/ico_radio_on.svg") no-repeat center/contain; */
                        width: 20px;
                        height: 20px;

                        @media only screen and (max-width: 750px) {
                            width: 14px;
                            height: 14px;
                        }
                    }
                }
            }
        }

    
        span.wpcf7-list-item-label::before{
            font-size: 2.4rem;
            content: "";
            background: url("/wp-content/themes/oden/img/common/ico_radio.svg") no-repeat center/contain;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            color: var(--color-gray01);
            position: absolute;
            top: 50%;
            left: 0;
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);

            @media only screen and (max-width: 750px) {
                width: 14px;
                height: 14px;
            }
        }

        span.wpcf7-list-item-label {
            font-size: 1.4rem;
            font-weight: 300;
            line-height: 1.6;
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            padding-left: 26px;
            position: relative;

            @media only screen and (max-width: 750px) {
                font-size: 1.4rem;
                -webkit-box-align: start;
                    -ms-flex-align: start;
                        align-items: flex-start;
                padding-left: 20px;
            }
        }
    }

    .vertical-align {
        font-size: 1.4rem;
        line-height: 1.8;
        width: 100%;
        min-height: 30px;

        @media only screen and (max-width: 750px) {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
            min-height: auto;
        }

        span.vertical-item{
            display: block;
            margin-top: 0;
            margin-bottom: 10px;
        }

        .vertical-item {
            font-size: 1.4rem;
            margin-bottom: 20px;
        }

        label {
            @media only screen and (max-width: 750px) {
                margin-bottom: 10px;

                &:last-of-type {
                    margin-bottom: 6px;
                }
            }
        }
    }

    .note {
        margin-top: 30px;
        font-size: 1.0rem;
        line-height: 1.4;
        text-align: center;

        @media only screen and (max-width: 750px) {
            text-align: left;
            padding: 0;
            text-indent: 0;
        }
    }

    .button-area {
      width: min(80%, 270px);
      height: 64px;
      margin: 0 auto;
    
        @media only screen and (max-width: 750px) {
          width: 100%;
        }

        &:hover {
            &::after {
                border-color: var(--color-lightest);

                @media only screen and (max-width: 960px) and (min-width: 751px) {
                    border-color: var(--color-accent);
                }

                @media only screen and (max-width: 750px) {
                    border-color: var(--color-accent);
                }
            }
        }

        p {
            margin-bottom: 10px;
            height: 100%;
            position: relative;

            &::after {
              position: absolute;
              content: "";
              width: 15px;
              height: 15px;
              top: 0;
              bottom: 0;
              right: calc(50% - 60px);
              margin: auto;
              border: 2px solid var(--color-lightest);
              border-width: 2px 2px 0 0;
              -webkit-transform: rotate(45deg);
                      transform: rotate(45deg);
              -webkit-transition: all 300ms;
              transition: all 300ms;
            }

            &:hover::after {
              border-color: var(--color-primary);
            }
        }

        input[type="submit"],input[type="reset"] {
            width: 100%;
            height: 100%;
            background-color: var(--color-primary);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: var(--color-lightest);
            font-size: 1.8rem;
            border: var(--color-primary) solid 1px;
            -webkit-transition: all 300ms;
            transition: all 300ms;
            border-radius: 0;
    
            @media only screen and (max-width: 750px) {
                font-size: 1.6rem;
                padding: 0 15px;
            }
    
            &:hover {
                background-color: var(--color-lightest);
                color: var(--color-primary);

                @media only screen and (max-width: 960px) and (min-width: 751px) {
                    background-color: var(--color-lightest);
                    color: var(--color-accent);
                }
    
                @media only screen and (max-width: 750px) {
                    background-color: var(--color-lightest);
                    color: var(--color-accent);
                }
            }

            &[name="submitReset"] {
                background-color: var(--color-gray01);
                border-color: var(--color-gray01);
                
                &::after {
                    position: absolute;
                    top: 50%;
                    right: 22px;
                    -webkit-transform: translateY(-50%);
                            transform: translateY(-50%);
                    content: "";
                    width: 29px;
                    height: 4px;
                    -webkit-transition: all 300ms;
                    transition: all 300ms;
        
                    @media only screen and (max-width: 750px) {
                        right: calc(14 / 360 * 100vw);
                        width: calc(24 / 360 * 100vw);
                        height: calc(3 / 360 * 100vw);
                    }
                }

                &:hover {
                    background-color: var(--color-lightest);
                    color: var(--color-gray01);
                    opacity: 1;
                }
            }

            &[name="submitBack"] {
                background-color: var(--color-gray01);
                border-color: var(--color-gray01);

                &::after {
                    position: absolute;
                    top: 50%;
                    left: 22px;
                    -webkit-transform: translateY(-50%) scaleX(-1);
                            transform: translateY(-50%) scaleX(-1);
                    content: "";
                    width: 29px;
                    height: 4px;
                    -webkit-transition: all 300ms;
                    transition: all 300ms;
        
                    @media only screen and (max-width: 750px) {
                        left: calc(14 / 360 * 100vw);
                        width: calc(24 / 360 * 100vw);
                        height: calc(3 / 360 * 100vw);
                    }
                }

                &:hover {
                    background-color: var(--color-lightest);
                    color: var(--color-gray01);
        
                    &::after {
                        left: 15px;
        
                        @media only screen and (max-width: 750px) {
                            left: calc(14 / 360 * 100vw);
                        }
                    }
                }
            }
        }

        .wpcf7-spinner {
            display: none!important;
        }
    }
}
.information-text {
    font-size: 1.6rem;
    line-height: 1.8;
    text-align: center;

    a {
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }
}
.information-confirmation {
    width: 520px;
    padding: 26px;
    text-align: center;
    background-color: var(--color-gray01);
    margin: 30px auto 70px;
    border-radius: 4px;
    color: var(--color-lightest);
    font-size: 1.4rem;

    @media only screen and (max-width: 750px) {
        width: 100%;
    }   

    label{
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 10px;

        input {
            width: 20px;
            height: 20px;
        }

        span {
            font-size: 1.4rem;

            @media only screen and (max-width: 750px) {
                text-align: left;
            }   
        }
    }
}
strong.important {
    color: var(--color-primary);
}
.pp_box {
    width: 100%;
    height: 300px;
    border: var(--color-gray01) solid 1px;
    padding: 20px;
    overflow-y: auto;
    margin-bottom: 20px;
    background-color: var(--color-lightest);
}
.recovery-area {
    width: 100%;
    padding: 30px;
    background-color: var(--color-gray01);
    border-radius: 4px;
    text-align: center;
    margin-bottom: 30px;

    p {
        margin: 0;
    }
}
/* ---------------------
Error
--------------------- */
.wpcf7-response-output {
    color: var(--color-warning);
    font-size: 1.6rem;
    font-weight: 600;
    width: 640px;
    margin: 60px auto 60px!important;
    padding: 1em!important;
    border: var(--color-warning) solid 2px!important;
    text-align: center;

    @media only screen and (max-width: 750px) {
        width: calc(100% - 40px);
    }
}
.information-confirmation .error {
    text-align: center;
}
/* ---------------------
Complete
--------------------- */
.complete-area {
    padding: 3em;
    min-height: 400px;
    margin: 0 auto;
    text-align: center;

    @media only screen and (max-width: 750px) {
        width: 100%;
        min-height: 200px;
        padding: 0;
    }

    h2 {
        font-size: 2.2rem!important;
        margin-bottom: 20px!important;
    }

    p {
        font-size: 1.6rem;
        line-height: 2;
        word-break: break-all;
        margin-bottom: 1em;
    
        @media only screen and (max-width: 750px) {
            font-size: 1.2rem;
        }

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}
/* ===================================================================
  CSS information
  file name  :  pagenatione.css
=================================================================== */
.pagination__area { 
    margin: 100px 0 0;

    @media only screen and (max-width: 750px) {
        margin: 50px 0;
    }

    &.detail {
        .pagination {
            .nav-links {
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;

                a {
                    width: auto;
                    height: auto;
                    border: none;
                    padding: 0;
                    text-decoration: underline;
    
                    @media only screen and (max-width: 750px) {
                        font-size: 1.6rem;
                        margin: 0 10px;
                    }
    
                    &:hover {
                        background: none;
                        color: var(--color-primary);
                        text-decoration: none;
    
                        @include mq(tab-landscape) {
                            text-decoration: underline;
                        }
        
                        @include mq(tab) {
                            text-decoration: underline;
                        }
                        
                        @media only screen and (max-width: 750px) {
                            text-decoration: underline;
                        }
                    }

                    &[rel="prev"], &[rel="next"] {
                        width: 40px;
                        height: 40px;
                        border: var(--color-primary) solid 1px;
                        padding: 20px;
                        text-decoration: none;
                
                        @media only screen and (max-width: 750px) {
                            margin: 0 0.4em;
                        }
        
                        &:hover {
                            background-color: var(--color-primary);
                            color: var(--color-lightest);
                            opacity: 1;

                            &::after {
                                border-color: var(--color-lightest);
                            }
                        }
                    }
                }
            }
        }
    }

    .pagination {
        clear: both;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 1.8rem;
        line-height: 1;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-align: center;
        position: relative;
    
        @media only screen and (max-width: 750px) {
            font-size: 1.6rem;
        }

        .first,
        .last {
            display: none;
        }

        .nav-links>.wp-pagenavi {
            padding: 0;
        }

        .nav-links, .wp-pagenavi {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            gap: 10px;
            font-weight: 600;
            line-height: 32px;
            list-style: none;
            margin: 0;
            -webkit-box-ordinal-group: 3;
                -ms-flex-order: 2;
                    order: 2;
            position: relative;

            @media only screen and (max-width: 750px) {
                max-width: 240px;
                -webkit-box-pack: start;
                    -ms-flex-pack: start;
                        justify-content: flex-start;
            }

            span {
                &[aria-current="page"] {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                        -ms-flex-pack: center;
                            justify-content: center;
                    -webkit-box-align: center;
                        -ms-flex-align: center;
                            align-items: center;
                    list-style: none;
                    width: 40px;
                    height: 40px;
                    font-size: 1.4rem;
                    font-weight: 600;
                    -webkit-transition: all 300ms;
                    transition: all 300ms;
                    background-color: var(--color-primary);
                    opacity: 1;
                    color: var(--color-lightest);
    
                    &::after {
                        border-color: var(--color-lightest);
                    }
                }
            }
        }
    
        a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            list-style: none;
            width: 40px;
            height: 40px;
            background-color: var(--color-lightest);
            border: var(--color-text) solid 1px;
            color: var(--color-text);
            font-size: 1.4rem;
            font-weight: 600;
            -webkit-transition: all 300ms;
            transition: all 300ms;
    
            @media only screen and (max-width: 750px) {
                margin: 0;
            }
            
            &:hover {
                background-color: var(--color-primary);
                border-color: var(--color-primary);
                color: var(--color-lightest);
                opacity: 1;
            }

                
            &.previouspostslink,
            &.nextpostslink,
            &[rel="prev"],
            &[rel="next"] {
                position: absolute;
                top: 50%;
                -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
                padding: 20px;
                text-indent: -9999px;

                &:hover {
                  background: none;
                  opacity: 0.7;

                    &::after {
                        /* border-color: var(--color-lightest); */
                    }
                }
            } 

            &.previouspostslink,
            &[rel="prev"] {
                -webkit-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                        order: 1;
                left: -55px;
                border: none;
                background: none;
        
                @media only screen and (max-width: 750px) {
                    position: absolute;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                            transform: translateY(-50%);
                    padding-left: 20px;
                    left: -50px;
                }
    
                &::after {
                    font-size: 0;
                    opacity: 1;
                    position: absolute;
                    content: "";
                    width: 16px;
                    height: 16px;
                    top: -4%;
                    left: 45%;
                    margin: auto;
                    border: solid var(--color-primary);
                    border-width: 2px 2px 0 0;
                    -webkit-transition: all 0.3s;
                    transition: all 0.3s;
                    -webkit-transform: rotate(225deg) translateX(-50%) translateY(-50%);
                            transform: rotate(225deg) translateX(-50%) translateY(-50%);
                    -webkit-box-sizing: content-box;
                            box-sizing: content-box;
        
                    @media only screen and (max-width: 750px) {
                        top: 0;
                        left: 45%;
                        border-width: 1px 1px 0 0;
                    }
                }
            }

            &.nextpostslink,
            &[rel="next"] {
                -webkit-box-ordinal-group: 4;
                    -ms-flex-order: 3;
                        order: 3;
                right: -55px;
                border: none;
                background: none;
        
                @media only screen and (max-width: 750px) {
                    position: absolute;
                    top: 50%;
                    right: -50px;
                    -webkit-transform: translateY(-50%);
                            transform: translateY(-50%);
                    padding-right: 20px;
                }
    
                &::after {
                    font-size: 0;
                    opacity: 1;
                    position: absolute;
                    content: "";
                    width: 16px;
                    height: 16px;
                    top: 60%;
                    right: 45%;
                    margin: auto;
                    border: solid var(--color-primary);
                    border-width: 2px 2px 0 0;
                    -webkit-transition: all 0.3s;
                    transition: all 0.3s;
                    -webkit-transform: rotate(45deg) translateX(-50%) translateY(-50%);
                            transform: rotate(45deg) translateX(-50%) translateY(-50%);
                    -webkit-box-sizing: content-box;
                            box-sizing: content-box;
        
                    @media only screen and (max-width: 750px) {
                        top: 55%;
                        right: 45%;
                        border-width: 1px 1px 0 0;
                    }
                }
            } 
        }

        .page-list {
            font-size: 1.6rem;
            font-weight: 600;
            line-height: 1;
            color: var(--color-primary);
            text-decoration: underline;
            padding: 0 35px;

            @media only screen and (max-width: 750px) {
                padding: 0 calc(30 / 375 * 100vw);
            }
        

            &:hover {
                text-decoration: none;
            }
        }
    }
}
/* ===================================================================
  CSS information
  file name  :  content-main.css
=================================================================== */
/* ---------------------------
more_btn
--------------------------- */
.more_btn {
  width: min(80%, 400px);
  height: 80px;
  margin: 0 auto;

  @media only screen and (max-width: 750px) {
    width: 100%;
  }

  .news &, .event &, .topics & {
    margin-top: 100px;

    @media only screen and (max-width: 750px) {
      margin-top: calc(100 / 750 * 100vw);
    }
  }
  
  a {
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--color-lightest);
    font-size: 1.4rem;
    border: var(--color-primary) solid 1px;

    span {
      position: relative;

      &::after {
        position: absolute;
        content: "";
        width: 15px;
        height: 15px;
        top: 0;
        bottom: 0;
        right: -30px;
        margin: auto;
        border: 1px solid var(--color-lightest);
        border-width: 1px 1px 0 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transition: all 300ms;
        transition: all 300ms;

        @media only screen and (max-width: 750px) {
          right: calc(-40 / 750 * 100vw);
        }
      }
    }

    &:hover {
      background-color: var(--color-lightest);
      color: var(--color-primary);

      @media only screen and (max-width: 960px) and (min-width: 751px) {
        background-color: var(--color-primary);
        color: var(--color-lightest);
      }

      @media only screen and (max-width: 750px) {
        background-color: var(--color-primary);
        color: var(--color-lightest);
      }

      span {
        &::after {
          border-color: var(--color-primary);

          @media only screen and (max-width: 960px) and (min-width: 751px) {
            border-color: var(--color-lightest);
          }

          @media only screen and (max-width: 750px) {
            border-color: var(--color-lightest);
          }
        }
      }
    }
  }
}
/* ---------------------------
about
--------------------------- */
/* Aboutアニメーション */
.about-oden_obj {
  width: min(calc(200 / 1200 * 100vw), 200px);
  height: min(calc(500 / 1200 * 100vw), 500px);
  margin: min(calc(-60 / 1200 * 100vw), -60px) auto min(calc(110 / 1200 * 100vw), 110px);
  position: relative;

  @media only screen and (max-width: 750px) {
    width: calc(200 / 750 * 100vw);
    height: calc(500 / 750 * 100vw);
    margin: calc(-60 / 750 * 100vw) auto calc(110 / 750 * 100vw);
  }

  .triangle {
    width: min(calc(187 / 1200 * 100vw), 187px);
    height: min(calc(162 / 1200 * 100vw), 162px);
    background-color: var(--color-gray03);
    clip-path: polygon(50% 0%, 0% min(calc(162 / 1200 * 100vw), 162px), min(calc(187 / 1200 * 100vw), 187px) min(calc(162 / 1200 * 100vw), 162px));
    position: absolute;
    top: 0;
    left: -10px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: -1;
    opacity: 0;

    @media only screen and (max-width: 750px){
      width: calc(187 / 750 * 100vw);
      height: calc(162 / 750 * 100vw);
      clip-path: polygon(50% 0%, 0% calc(162 / 750 * 100vw), calc(187 / 750 * 100vw) calc(162 / 750 * 100vw));
    }

    .is-inview & {
      -webkit-animation: about-triangle 1s ease-in-out forwards;
              animation: about-triangle 1s ease-in-out forwards;
    }
  }
  .circle {
    width: min(calc(154 / 1200 * 100vw), 154px);
    height: min(calc(154 / 1200 * 100vw), 154px);
    border-radius: 50%;
    background-color: var(--color-accent);
    position: absolute;
    top: min(calc(192 / 1200 * 100vw), 192px);
    right: -40px;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    z-index: -1;
    opacity: 0;

    @media only screen and (max-width: 750px){
      width: calc(154 / 750 * 100vw);
      height: calc(154 / 750 * 100vw);
      top: calc(192 / 750 * 100vw);
    }

    .is-inview & {
      -webkit-animation: about-circle 1s ease-in-out 0.5s forwards;
              animation: about-circle 1s ease-in-out 0.5s forwards;
    }
  }
  .square {
    width: min(calc(187 / 1200 * 100vw), 187px);
    height: min(calc(108 / 1200 * 100vw), 108px);
    background-color: var(--color-primary);
    position: absolute;
    top: min(calc(376 / 1200 * 100vw), 376px);;
    left: -40px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: -1;
    opacity: 0;

    @media only screen and (max-width: 750px){
      width: calc(187 / 750 * 100vw);
      height: calc(108 / 750 * 100vw);
      top: calc(376 / 750 * 100vw);
    }

    .is-inview & {
      -webkit-animation: about-square 1s ease-in-out 1s forwards;
              animation: about-square 1s ease-in-out 1s forwards;
    }
  }
}
/* Aboutタイトル */
.about-title_container {
  width: min(calc(700 / 1200 * 100vw), 700px);
  margin: 0 auto min(calc(140 / 1200 * 100vw), 140px);

  @media only screen and (max-width: 750px){
    width: calc(700 / 750 * 100vw);
    margin: 0 auto calc(140 / 750 * 100vw);
  }

  h3 {
    color: var(--color-text);
  }
  
  .about-title01 {
    font-size: min(calc(48 / 1200 * 100vw), 4.8rem);
    font-weight: var(--weight-bold);
    line-height: 1.6;
    text-align: center;
    margin: 0 0 min(calc(130 / 1200 * 100vw), 130px);

    @media only screen and (max-width: 750px){
      font-size: calc(46 / 750 * 100vw);
      margin: 0 0 calc(130 / 750 * 100vw);
    }
  }

  .about-title02 {
    margin: 0 0 min(calc(90 / 1200 * 100vw), 90px);

    @media only screen and (max-width: 750px){
      margin: 0 0 calc(90 / 750 * 100vw);
    }

    img {
      width: min(calc(685 / 1200 * 100vw), 685px);
      margin: 0 auto;

      @media only screen and (max-width: 750px){
        width: calc(685 / 750 * 100vw);
      }
    }
  }

  .about-title03 {
    width: 14.2em;
    margin: 0 auto;
    font-size: min(calc(53 / 1200 * 100vw), 5.3rem);
    font-weight: var(--weight-medium);
    font-style: italic;
    line-height: 1.3;

    @media only screen and (max-width: 750px){
      font-size: calc(48 / 750 * 100vw);
    }

    span {
      color: var(--color-primary);
    }

    small {
      text-align: center;
      display: block;
      font-size: min(calc(25 / 1200 * 100vw), 2.5rem);
      font-weight: var(--weight-bold);
      font-style: normal;
      margin-bottom: min(calc(20 / 1200 * 100vw), 20px);

      @media only screen and (max-width: 750px){
        font-size: calc(30 / 750 * 100vw);
        margin-bottom: calc(20 / 750 * 100vw);
      }
    }
  }
}
/* parallax-area */
.parallax-area {
  position: relative;
  height: min(calc(300 / 1200 * 100vw), 300px);
  overflow: hidden;
  background: #EFEFFE;
  margin-bottom: min(calc(150 / 1200 * 100vw), 150px);

  @media only screen and (max-width: 750px){
    height: calc(300 / 750 * 100vw);
    margin-bottom: calc(150 / 750 * 100vw);
  }

  ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
    gap: min(calc(40 / 1200 * 100vw), 40px);
    width: min(calc(4000 / 1200 * 100vw), 4000px);
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);

    @media only screen and (max-width: 750px){
      gap: calc(40 / 750 * 100vw);
      width: calc(4000 / 750 * 100vw);
    }

    li {
      width: min(calc(170 / 1200 * 100vw), 170px);

      @media only screen and (max-width: 750px){
        width: calc(170 / 750 * 100vw);
      }

      img {
        width: 100%;
        will-change: transform;
        -webkit-transition: -webkit-transform 0.1s linear;
        transition: -webkit-transform 0.1s linear;
        transition: transform 0.1s linear;
        transition: transform 0.1s linear, -webkit-transform 0.1s linear; /* カクつき防止 */
      }

      &:nth-of-type(odd) img {
        -webkit-transform: scaleY(-1);
                transform: scaleY(-1);
      }
    }
  }
}
/* about-description */
.about-description {
  width: min(calc(800 / 1200 * 100vw), 800px);
  margin:0 auto min(calc(230 / 1200 * 100vw), 230px);

  @media only screen and (max-width: 750px) {
    width: calc(700 / 750 * 100vw);
    margin:0 auto calc(230 / 7500 * 100vw);
  }

  h3 {
    font-size: min(calc(32 / 1200 * 100vw), 3.2rem);
    font-weight: var(--weight-bold);
    line-height: 1.4;
    color: var(--color-text);
    margin: 0 0 min(calc(30 / 1200 * 100vw), 30px);

    @media only screen and (max-width: 750px) {
      font-size: calc(34 / 750 * 100vw);
      margin: 0 0 calc(30 / 750 * 100vw);
    }
  }

  p {
    font-size: min(calc(16 / 1200 * 100vw), 1.6rem);
    font-weight: var(--weight-regular);
    line-height: 1.8;

    @media only screen and (max-width: 750px) {
      font-size: calc(32 / 750 * 100vw);
    }
  }

  .about-target {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: min(calc(20 / 1200 * 100vw), 20px);
    margin-top: min(calc(70 / 1200 * 100vw), 70px);

    @media only screen and (max-width: 750px) {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: calc(20 / 750 * 100vw);
      margin-top: calc(70 / 750 * 100vw);
    }

    .about-target_symbol {
      width: min(calc(146 / 1200 * 100vw), 146px);
      height: min(calc(146 / 1200 * 100vw), 146px);
      border-radius: 50%;
      background-color: var(--color-primary);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;

      @media only screen and (max-width: 750px) {
        width: 100%;
        height: auto;
        padding: 10px 0;
        border-radius: 0;
      }

      p {
        font-size: min(calc(16 / 1200 * 100vw), 1.6rem);
        font-weight: var(--weight-bold);
        line-height:1;
        color: var(--color-accent);
        margin: 0;

        @media only screen and (max-width: 750px) {
          font-size: calc(30 / 750 * 100vw);
        }
      }
    }

    .about-target_list {
      width: min(calc(630 / 1200 * 100vw), 630px);

      @media only screen and (max-width: 750px) {
        width: calc(660 / 750 * 100vw);
        margin: 0 auto;
      }

      &.align-center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        @media only screen and (max-width: 750px) {
          display: block;
        }
      }

      .about-target_emphasis {
        font-size: min(calc(380 / 1200 * 100vw), 3.8rem);
        font-weight: bold;
        letter-spacing: 0.5em;

        @media only screen and (max-width: 750px) {
          text-align: center;
          -webkit-transform: translateX(0.25em);
                  transform: translateX(0.25em);
        }
      }

      ul {
        margin-bottom: min(calc(16 / 1200 * 100vw), 16px);

        @media only screen and (max-width: 750px) {
          margin-bottom: calc(16 / 750 * 100vw);
        }

        li {
          font-size: min(calc(18 / 1200 * 100vw), 1.8rem);
          font-weight: var(--weight-bold);
          line-height: 1.6;
          margin-bottom: min(calc(8 / 1200 * 100vw), 8px);
          text-indent: -1em;
          padding-left: 1em;

          @media only screen and (max-width: 750px) {
            font-size: calc(32 / 750 * 100vw);
            margin-bottom: calc(8 / 750 * 100vw);
          }
        }
      }

      p {
          font-size: min(calc(18 / 1200 * 100vw), 1.8rem);
          font-weight: var(--weight-bold);
          line-height: 1.6;

          @media only screen and (max-width: 750px) {
            font-size: calc(32 / 750 * 100vw);
          }

          a{
            text-decoration: underline;
            font-weight: var(--weight-bold);
            color: #008F58;
          }
      }

      .about-target_note {
        font-size: min(calc(13 / 1200 * 100vw), 1.3rem);
        font-weight: var(--weight-regular);
        line-height: 1.6;
        
        @media only screen and (max-width: 750px) {
          font-size: calc(24 / 750 * 100vw);
        }
      }
    }
  }
}
/* about-contents */
.about-contents {
  width: min(calc(800 / 1200 * 100vw), 800px);
  margin: 0 auto min(calc(150 / 1200 * 100vw), 150px);

  @media only screen and (max-width: 750px) {
    width: calc(700 / 750 * 100vw);
    margin: 0 auto calc(150 / 750 * 100vw);
  }

  &:last-of-type {
    margin-bottom: 0;
  }

  h3 {
    font-size: min(calc(27 / 1200 * 100vw), 2.7rem);
    font-weight: var(--weight-bold);
    line-height: 1.4;
    color: var(--color-text);
    margin-bottom: min(calc(10 / 1200 * 100vw), 10px);

    @media only screen and (max-width: 750px) {
      font-size: calc(34 / 750 * 100vw);
      margin-bottom: calc(10 / 750 * 100vw);
    }
  }

  p {
    font-size: min(calc(16 / 1200 * 100vw), 1.6rem);
    font-weight: var(--weight-regular);
    line-height: 1.8;

    @media only screen and (max-width: 750px) {
      font-size: calc(32 / 750 * 100vw);
    }
  }
}
.about-schedule {
  width: 100%;
  border-top: var(--color-primary) solid 8px;
}
.schedule_list {
  ul {
    width: min(calc(800 / 1200 * 100vw), 800px);
    margin: 100px auto 138px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    border-top: var(--color-gray03) solid 1px;
    background-color: var(--color-alpha03);

    @media only screen and (max-width: 750px) {
      width: 100%;
      margin: 40px auto 60px;;
    }

    li {
      font-size: min(calc(16 / 1200 * 100vw), 1.6rem);
      line-height: 2;
      border-bottom: var(--color-gray03) solid 1px;
      width: 100%;

      @media only screen and (max-width: 750px) {
        font-size: min(calc(32 / 750 * 100vw), 1.6rem);
      }

      a {
        padding: min(calc(34 / 1200 * 100vw), 34px) 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        @media only screen and (max-width: 750px) {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
        }

        &:hover {
          background-color: var(--color-alpha02);

          @media only screen and (max-width: 960px) and (min-width: 751px) {
            background: none
          }

          @media only screen and (max-width: 750px) {
            background: none
          }
        }

        .date {
          font-weight: var(--weight-bold);
          -ms-flex-preferred-size: min(calc(380 / 1200 * 100vw), 380px);
              flex-basis: min(calc(380 / 1200 * 100vw), 380px);
          letter-spacing: .08em;
          display: block;

          @media only screen and (max-width: 750px) {
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
          }
        }

        .title {
          -ms-flex-preferred-size: min(calc(380 / 1200 * 100vw), 380px);
              flex-basis: min(calc(380 / 1200 * 100vw), 380px);

          @media only screen and (max-width: 750px) {
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
          }
        }
      }
    }
  }
}
/* ---------------------------
member
--------------------------- */
.member-list {
  width: 100%;
  padding: min(calc(60 / 1200 * 100vw), 60px) 0;
  border-top: solid 8px;

  @media only screen and (max-width: 750px) {
    padding: calc(60 / 750 * 100vw) 0;
  }

  &:last-of-type {
    padding-bottom: 0;
  }

  &.corporation {
    border-top-color: var(--color-primary);
  }
  &.individual {
    border-top-color: var(--color-accent);
  }

  .inner-member {
    width: min(calc(800 / 1200 * 100vw), 800px);
    margin: 0 auto;

    @media only screen and (max-width: 750px) {
      width: 100%;
      padding: 0 20px;
    }

    h3 {
      font-size: 1.6rem;
      font-weight: var(--weight-bold);
      color: var(--color-text);
      margin: 0 0 min(calc(60 / 1200 * 100vw), 60px);

      @media only screen and (max-width: 750px) {
        margin-top: calc(60 / 750 * 100vw);
      }
    }

    ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: min(calc(60 / 1200 * 100vw), 60px);

      @media only screen and (max-width: 750px) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: calc(60 / 750 * 100vw);
      }

      li {
        width: min(calc(370 / 1200 * 100vw), 370px);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: min(calc(28 / 1200 * 100vw), 28px);

        @media only screen and (max-width: 750px) {
          width: 100%;
          gap: calc(40 / 750 * 100vw);
        }

        .pic-box {
          width: min(calc(150 / 1200 * 100vw), 150px);
          border: var(--color-gray03) solid 1px;

          @media only screen and (max-width: 750px) {
            width: calc(220 / 750 * 100vw);
          }
        }

        .txt-box {
          width: min(calc(190 / 1200 * 100vw), 190px);

          @media only screen and (max-width: 750px) {
            width: calc(490 / 750 * 100vw);
          }

          h4 {
            font-size: 1.6rem;
            font-weight: var(--weight-bold);
            line-height: 1.7;
            color: var(--color-text)
          }

          p {
            margin: 0;
            font-size: 1.2rem;
            font-weight: var(--weight-regular);
            line-height: 1.4;

            @media only screen and (max-width: 750px) {
              font-size: 1.6rem;
              line-height: 1.6;
            }

            &.link {
              margin-bottom: min(calc(26 / 1200 * 100vw), 26px);
              margin-top: 13px;
              line-height: 2.0;s

              @media only screen and (max-width: 750px) {
                margin-bottom:calc(26 / 750 * 100vw);
              }

              a:hover {
                text-decoration: underline;

                @media only screen and (max-width: 960px) and (min-width: 751px) {
                  text-decoration: none;
                }
                @media only screen and (max-width: 750px) {
                  text-decoration: none;
                }
              }
            }
          }
        }
      }
    }
  }
}
/* ===================================================================
  CSS information
  file name  :  content-blog.css
=================================================================== */
/* ---------------------------
column
--------------------------- */
.column1 {
  width: min(calc(800 / 1200 * 100vw), 800px);
  margin: 0 auto;

  @media only screen and (max-width: 750px) {
    width: 100%;
    padding: 0 20px;
  }
}
.column2 {
  width: min(calc(1000 / 1200 * 100vw), 1000px);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;

  @media only screen and (max-width: 750px) {
    width: 100%;
    padding: 0 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
/* ---------------------------
main_column
--------------------------- */
main {
  h2 {
    font-size: 2.3rem;
    font-weight: var(--weight-bold);
    line-height: 1.6;
    letter-spacing: .07em;
    margin-bottom: 20px;
    padding-top: 20px;

    &:not(:first-of-type) {
      margin-top: 30px;
    }
  }

  h3 {
    font-size: 2.4rem;
    font-weight: var(--weight-medium);
    line-height: 1.7;
    color: var(--color-primary);
    margin-top: 40px;
    margin-bottom: 10px;
  }

  h4 {
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
    line-height: 1.6;
    letter-spacing: .07em;
    margin-bottom: 10px;

    &:not(:first-of-type) {
      margin-top: 30px;
    }
  }

  p {
    font-size: 1.6rem;
    font-weight: var(--weight-regular);
    line-height: 1.7;
    margin-bottom: 40px;

    a {
      text-decoration: underline !important;
    }
  }

  a {
    text-decoration: underline;
    position: relative;

    &:hover {
      text-decoration: none;
    }

    .access-container & {
      &[target="_blank"] {
        &::before {
          position: absolute;
          bottom: 0.4em;
          right: -1.2em;
          content: "\f2d2";
          font: normal 1.5rem "Font Awesome 6 Free";
        }
      }
    }
  }

  figure {
    margin-bottom: 60px;
  }

  figcaption{
    font-size: 1.4rem;
    margin-top: 10px;
  }

  .speaker-container {
    width: 100%;
    padding: min(calc(40 / 1200 * 100vw), 40px);
    background-color: var(--color-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    @media only screen and (max-width: 750px) {
      padding: 20px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }

    .speaker-pict {
      width: min(calc(180 / 1200 * 100vw), 180px);
      height: min(calc(130 / 1200 * 100vw), 130px);
      border-radius: 100vh;
      overflow: hidden;

      @media only screen and (max-width: 750px) {
        width: 70%;
        height: auto;
        margin: 0 auto 20px; 
      }
    }

    .speaker-data {
      width: min(calc(360 / 1200 * 100vw), 360px);
      color: var(--color-lightest);

      @media only screen and (max-width: 750px) {
        width: 100%;
      }

      .speaker-position {
        font-size: 1.2rem;
        line-height: 1.4;
        margin-bottom: 8px;
      }

      .speaker-name {
        font-size: 2rem;
        font-weight: var(--weight-bold);
        line-height: 1.6;
        margin-bottom: 16px;

        small {
          font-size: 1.6rem;
          font-weight: var(--weight-regular);
        }
      }

      .speaker-profile {
        font-size: 1.2rem;
        line-height: 1.6;
        margin-bottom: 0;
      }
    }
  }

  table {
    width: 100%;
    overflow-wrap: anywhere;

    tr {
      background-color: var(--color-gray02);

      &:nth-of-type(even) {
        background-color: var(--color-gray03);
      }

      @media only screen and (max-width: 750px) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }

      th, td {
        padding: 20px;
        text-align: left;
      }

      th {
        width: 9em;
        font-size: 1.6rem;
        line-height: 1.6;
        vertical-align: top;

        @media only screen and (max-width: 750px) {
          width: 100%;
          padding-bottom: 10px;
        }
      }

      td {
        font-size: 1.4rem;
        line-height: 1.8;
        padding-left: 0;

        @media only screen and (max-width: 750px) {
          width: 100%;
          padding: 0 20px 20px;
        }

        ul {
          li {
            position: relative;
            padding-left: 1em;

            &::before {
              position: absolute;
              top: 8px;
              left: 5px;
              content: "";
              width: 6px;
              height: 6px;
              background-color: var(--color-primary);
              border-radius: 50%;
            }
          }
        }
      }
    }
  }

  .map-container {
    margin-top: 40px;

    iframe {
      width: 100%;
      height: 450px;
      margin-bottom: 10px;
      border: var(--color-gray03) solid 1px;
    }

    p {
      font-size: 1.2rem;
    }
  }
}
/* ---------------------------
sub_column
--------------------------- */
.sub_column {
  width: min(calc(250 / 1200 * 100vw), 250px);
  background-color: var(--color-gray02);
  margin-bottom: 20px;
  padding: 40px 0;
  position: sticky;
  top: 20px;
  left: 0;

    @media only screen and (max-width: 750px) {
    width: 100%;
    padding: 20px 0;
    }

  .event-data {
    @media only screen and (max-width: 750px) {
      padding: 0 20px;
    }

    p {
      padding-left: min(calc(30 / 1200 * 100vw), 30px);
      margin-bottom: 40px;
      border-left: var(--color-primary) solid 4px;
      font-size: min(calc(27 / 1200 * 100vw), 2.7rem);
      font-weight: var(--weight-bold);
      line-height: 1.4;

      @media only screen and (max-width: 750px) {
        font-size: 2.4rem;
        margin-bottom: 20px;
      }

      &.capacity {
        font-size: min(calc(23 / 1200 * 100vw), 2.3rem);

        @media only screen and (max-width: 750px) {
          font-size: 2.4rem;
        }

        span {
          margin-bottom: 10px;

          @media only screen and (max-width: 750px) {
            margin-bottom: 5px;
          }
        }
      }

      span {
        font-size: 1.4rem;
        font-weight: var(--weight-regular);
        display: block;
      }
    }
  }

  .event-btn {
    width: min(calc(190 / 1200 * 100vw), 190px);
    height: min(calc(190 / 1200 * 100vw), 190px);
    margin: 0 auto;

    @media only screen and (max-width: 750px) {
      width: calc(400 / 750 * 100vw);
      height: calc(400 / 750 * 100vw);
    }

    a {
      background-color: var(--color-accent);
      border-radius: 100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      width: 100%;
      height: 100%;
      font-size: min(calc(23 / 1200 * 100vw), 2.3rem);
      font-weight: var(--weight-bold);
      line-height: 1.6;
      text-align: center;
      -webkit-transition: all 300ms;
      transition: all 300ms;
      position: relative;

      @media only screen and (max-width: 750px) {
        font-size: 2.3rem;
      }

      &::after {
        position: absolute;
        -webkit-transition: all 300ms;
        transition: all 300ms;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        border: var(--color-accent) solid 3px;
        border-radius: 100vh;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
      }

      &:hover {
        color: var(--color-primary);

        @media only screen and (max-width: 960px) and (min-width: 751px) {
          color: var(--color-darkest);
        }
        @media only screen and (max-width: 750px) {
          color: var(--color-darkest);
        }

        &::after {
          border-color: var(--color-primary);

          @media only screen and (max-width: 960px) and (min-width: 751px) {
            border-color: var(--color-accent);
          }
          @media only screen and (max-width: 750px) {
            border-color: var(--color-accent);
          }
        }
      }
    }
  }
}
/* ---------------------------
index
--------------------------- */
.index {
  width: 100%;

  .inner_index {
    width: min(calc(1000 / 1200 * 100vw), 1000px);
    margin: 0 auto;

    @media only screen and (max-width: 750px) {
      width: 100%;
      padding: 0 20px;
    }
  }
}
/* ---------------------------
information
--------------------------- */
.news_list {
  ul {
    width: min(calc(800 / 1200 * 100vw), 800px);
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    border-top: var(--color-gray03) solid 1px;
    background-color: var(--color-alpha03);

    @media only screen and (max-width: 750px) {
      width: 100%;
    }

    li {
      font-size: 1.6rem;
      line-height: 2;
      border-bottom: var(--color-gray03) solid 1px;
      width: 100%;

      a {
        padding: 34px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        @media only screen and (max-width: 750px) {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
        }

        &:hover {
          background-color: var(--color-alpha02);

          @media only screen and (max-width: 960px) and (min-width: 751px) {
            background: none
          }

          @media only screen and (max-width: 750px) {
            background: none
          }
        }

        .date {
          font-weight: var(--weight-bold);
          -ms-flex-preferred-size: 200px;
              flex-basis: 200px;
          letter-spacing: .08em;
          display: block;

          @media only screen and (max-width: 750px) {
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
          }
        }

        .title {
          -ms-flex-preferred-size: 100%;
              flex-basis: 100%;

          @media only screen and (max-width: 750px) {
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
          }
        }
      }
    }
  }
}
/* ---------------------------
event, topics
--------------------------- */
.thumbnail_list {
  ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: min(calc(90 / 1200 * 100vw), 90px) min(calc(35 / 1200 * 100vw), 35px);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: min(calc(1000 / 1200 * 100vw), 1000px);
    margin: 0 auto;

    @media only screen and (max-width: 750px) {
      gap: calc(90 / 750 * 100vw);
      width: calc(670 / 750 * 100vw);
    }

    li {
      width: min(calc(310 / 1200 * 100vw), 310px);

      @media only screen and (max-width: 750px) {
        width: 100%;
      }

      .thumbnail_image {
        margin-bottom: 26px;
        overflow: hidden;

        @media only screen and (max-width: 750px) {
          margin-bottom: calc(40 / 750 * 100vw);
        }

        img {
          -webkit-transition: all 300ms;
          transition: all 300ms;
          height: 225px;
          -o-object-fit: cover;
             object-fit: cover;
        }

        &:hover img {
          -webkit-transform: scale(1.1);
                  transform: scale(1.1);

          @media only screen and (max-width: 960px) and (min-width: 751px) {
            -webkit-transform: scale(1);
                    transform: scale(1);
          }

          @media only screen and (max-width: 750px) {
            -webkit-transform: scale(1);
                    transform: scale(1);
          }
        }
      }

      .thumbnail_text {
        .day {
          font-size: 1.6rem;
          font-weight: var(--weight-bold);
          -webkit-font-feature-settings: "palt";
                  font-feature-settings: "palt";
          margin-bottom: 14px;

          @media only screen and (max-width: 750px) {
            margin-bottom: calc(14 / 750 * 100vw);
          }

          .topics & {
            font-size: 1.3rem;
            margin-bottom: 20px;

            @media only screen and (max-width: 750px) {
              margin-bottom: calc(20 / 750 * 100vw);
            }
          }
        }

        .tag {
          font-size: 1.3rem;
          font-weight: var(--weight-regular);
          padding: 4px 8px;
          margin-bottom: 16px;
          display: inline-block;
          text-align: center;

          @media only screen and (max-width: 750px) {
            margin-bottom: calc(16 / 750 * 100vw);
          }

          .event & {
            color: var(--color-accent);
            background-color: var(--color-primary);
          }

          .topics & {
            color: var(--color-text);
            background-color: var(--color-accent);
            min-width: 95px;
            margin-bottom: 15px;
          }
        }

        .name {
          font-size: 2.0rem;
          font-weight: var(--weight-bold);
          margin-bottom: 6px;

          small {
            font-size: 1.6rem;
            font-weight: var(--weight-regular);
          }
        }

        .description {
          font-size: min(calc(21 / 1200 * 100vw), 1.6rem);
          font-weight: var(--weight-bold);
          line-height: 1.7;

          @media only screen and (max-width: 750px) {
            font-size: calc(32 / 750 * 100vw);
          }

          .topics & {
            font-size: min(calc(28 / 1200 * 100vw), 2rem);
            line-height: 1.6;

            @media only screen and (max-width: 750px) {
              font-size: calc(32 / 750 * 100vw);
            }

          }
        }
      }
    }
  }
}
/* ===================================================================
  CSS information
  file name  :  page-home.css
=================================================================== */
.home {
    h2 {
      font-family: var(--font-family-secondary);
      font-size: 3.5rem;
      font-weight: var(--weight-semi-bold);
      font-style: italic;
      line-height: 1.5;
      margin-bottom: 56px;
      text-align: center;

      span {
        font-family: var(--font-family-primary);
        font-size: 1.2rem;
        font-weight: var(--weight-regular);
        font-style: normal;
        display: block;
        margin-top: 14px;
      }
    }

  /* ---------------------------
  intro
  --------------------------- */
  .intro {
    width: 100%;
    padding-top: 200px;
    overflow: hidden;

    @media only screen and (max-width: 750px) {
      padding: calc(100 / 750 * 100vw) 20px 0;
    }

    .inner_intro {
      width: min(100%, 900px);
      margin: 0 auto 430px;
      text-align: center;
      position: relative;

      @media only screen and (max-width: 750px) {
        margin-bottom: calc(500 / 750 * 100vw);
        text-align: left;
      }


      .intro_logo {
        margin-bottom: 80px;

        @media only screen and (max-width: 750px) {
          margin-bottom: calc(80 / 750 * 100vw);
        }

        img {
          margin: 0 auto;
          width: 640px;

          @media only screen and (max-width: 750px) {
            width: 100%;
          }
        }
      }

      h2 {
        font-family: var(--font-family-primary);
        font-size: 3.2rem;
        font-weight: var(--weight-bold);
        font-style: normal;
        margin-bottom: 30px;

        @media only screen and (max-width: 750px) {
          font-size: calc(60 / 750 * 100vw);
          text-align: left;
        }
      }

      p {
        font-size: 1.6rem;
        font-weight: var(--weight-regular);
        line-height: 2.12;

        @media only screen and (max-width: 750px) {
          font-size: calc(32 / 750 * 100vw);
        }
      }

      .bg_triangle {
        width: 440px;
        height: 380px;
        background-color: var(--color-gray03);
        clip-path: polygon(50% 0%, 0% 380px, 440px 380px);
        position: absolute;
        top: -100px;
        left: -200px;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        z-index: -1;
        opacity: 0;

        @media only screen and (max-width: 750px) {
          left: 0;
          -webkit-transform: translateX(-50%) scale(50%);
                  transform: translateX(-50%) scale(50%);
        }

        &.is-inview {
          -webkit-animation: move-triangle 1s ease-in-out forwards;
                  animation: move-triangle 1s ease-in-out forwards;

          @media only screen and (max-width: 750px) {
            -webkit-animation: move-triangle-sp 1s ease-in-out forwards;
                    animation: move-triangle-sp 1s ease-in-out forwards;
          }
        }
      }
      .bg_circle {
        width: 375px;
        height: 375px;
        border-radius: 50%;
        background-color: var(--color-accent);
        position: absolute;
        top: 420px;
        right: -200px;
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
        -webkit-transition: all 300ms;
        transition: all 300ms;
        z-index: -1;
        opacity: 0;

        @media only screen and (max-width: 750px) {
          right: 0;
          -webkit-transform: translateX(-50%) scale(50%);
                  transform: translateX(-50%) scale(50%);
        }

        &.is-inview {
          -webkit-animation: move-circle 1s ease-in-out forwards;
                  animation: move-circle 1s ease-in-out forwards;

          @media only screen and (max-width: 750px) {
            -webkit-animation: move-circle-sp 1s ease-in-out forwards;
                    animation: move-circle-sp 1s ease-in-out forwards;
          }
        }
      }
      .bg_square {
        width: 287px;
        height: 166px;
        background-color: var(--color-primary);
        position: absolute;
        top: 730px;
        left: -200px;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        -webkit-transition: all 300ms;
        transition: all 300ms;
        z-index: -1;
        opacity: 0;

        @media only screen and (max-width: 750px) {
          left: 0;
          -webkit-transform: translateX(-50%) scale(50%);
                  transform: translateX(-50%) scale(50%);
        }

        &.is-inview {
          -webkit-animation: move-square 1s ease-in-out forwards;
                  animation: move-square 1s ease-in-out forwards;

          @media only screen and (max-width: 750px) {
            -webkit-animation: move-square-sp 1s ease-in-out forwards;
                    animation: move-square-sp 1s ease-in-out forwards;
          }
        }
      }

      .mini_oden {
          position: absolute;
          bottom: -116px;
          left: 50%;

          @media only screen and (max-width: 750px) {
            bottom: calc(-80 / 750 * 100vw);
          }

        .triangle {
          width: 66px;
          height: 57px;
          background-color: var(--color-gray03);
          clip-path: polygon(50% 0%, 0% 57px, 66px 57px);
          position: absolute;
          top: 0;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          z-index: -1;
        }
        .circle {
          width: 54px;
          height: 54px;
          border-radius: 50%;
          background-color: var(--color-accent);
          position: absolute;
          top: 66px;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          z-index: -1;
        }
        .square {
          width: 66px;
          height: 38px;
          background-color: var(--color-primary);
          position: absolute;
          top: 130px;
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          z-index: -1;
        }
      }
    }
  }

  /* ---------------------------
  news
  --------------------------- */
  .news {
    width: 100%;
    padding: 190px 30px 0;

    @media only screen and (max-width: 750px) {
      padding: calc(150 / 750 * 100vw) 20px 0;
    }

    .inner_news {
      width: min(calc(800 / 1200 * 100vw), 800px);
      margin: 0 auto 130px;

      .bnr_continer{
        margin-bottom: 80px;
      }

      @media only screen and (max-width: 750px) {
        width: 100%;
        margin-bottom: 80px;
      }
    }
  }

  /* ---------------------------
  event
  --------------------------- */
  .event {
    width: 100%;
    padding: 200px 30px 0;

    @media only screen and (max-width: 750px) {
      padding: 80px 20px 0;
    }

    .inner_event{
      width: min(100%, 1000px);
      margin: 0 auto 130px;

      @media only screen and (max-width: 750px) {
        margin-bottom: 80px;
      }
    }
  }

  /* ---------------------------
  topics
  --------------------------- */
  .topics {
    width: 100%;
    padding: 190px 0 105px;

    @media only screen and (max-width: 750px) {
      padding: 80px 20px 0;
      margin-bottom: 80px;
    }

    .inner_topics {
      width: min(100%, 1000px);
      margin: 0 auto 90px;

      @media only screen and (max-width: 750px) {
        margin-bottom: 80px;
      }
    }
  }

  /* ---------------------------------------
  contact
  --------------------------------------- */
  .contact {
    background-color: var(--color-lightest);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: var(--color-primary) solid 8px;
    width: min(calc(1000 / 1200 * 100vw), 1000px);
    height: 320px;
    margin: 100px auto 0;
    position: relative;
    overflow: hidden;
    color: var(--color-primary);

    @media only screen and (max-width: 750px) {
      width: calc(100% - 60px);
      height: auto;
      margin: 0 30px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      padding: calc(20 / 750 * 100vw) 10px;
    }

    &::before {
      position: absolute;
      top: 50%;
      left: min(calc(-120 / 1200 * 100vw), -120px);
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      content: "";
      width: min(calc(470 / 1200 * 100vw), 470px);
      height: min(calc(470 / 1200 * 100vw), 470px);
      border-radius: 50%;
      background-color: var(--color-accent);
      z-index: 0;

      @media only screen and (max-width: 750px) {
        top: -50px;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        width: calc(600 / 750 * 100vw);
        height: calc(600 / 750 * 100vw);
      }
    }

    .contact_title {
      -ms-flex-preferred-size: min(calc(300 / 1200 * 100vw), 360px);
          flex-basis: min(calc(300 / 1200 * 100vw), 360px);
      font-size: min(calc(27 / 1200 * 100vw), 2.7rem);
      font-weight: var(--weight-bold);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      position: relative;
      z-index: 1;

       @media only screen and (max-width: 750px) {
          -ms-flex-preferred-size: 100%;
              flex-basis: 100%;
          font-size: calc(20 / 375 * 100vw);
          margin-bottom: calc(18 / 375 * 100vw);
          text-align: center;
      }
    }

    .contact_continer {
      -ms-flex-preferred-size: min(calc(640 / 1200 * 100vw), 620px);
          flex-basis: min(calc(640 / 1200 * 100vw), 620px);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: 25px;
      margin-top: 10px;
      padding-right: 20px;

      @media only screen and (max-width: 750px) {
          -ms-flex-preferred-size: 100%;
              flex-basis: 100%;
          padding-right: 0;
      }

      .contact_description {
        .contact_office {
          font-size: min(calc(26 / 1200 * 100vw), 2rem);
          font-weight: var(--weight-bold);
          margin-bottom: 5px;

          @media only screen and (max-width: 750px) {
            font-size: 2rem;
            text-align: center;
          }
        }
        .contact_tel {
          font-size: 1.8rem;
          font-weight: var(--weight-regular);

          a {
            font-size: 2.4rem;
            font-weight: var(--weight-bold);
            color: var(--color-primary);
          }
        }
      }

      .contact_mail {
        a {
          font-size: min(calc(16 / 1200 * 100vw), 1.3rem);
          line-height: 1;
          width: min(calc(315 / 1200 * 100vw), 315px);
          height: min(calc(75 / 1200 * 100vw), 75px);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          color: var(--color-lightest);
          background-color: var(--color-primary);
          border: var(--color-primary) solid 1px;
          -webkit-transition: all 300ms;
          transition: all 300ms;

          @media only screen and (max-width: 750px) {
            font-size: calc(16 / 375 * 100vw);
            width: calc(260 / 375 * 100vw);
            height: calc(55 / 375 * 100vw);
          }

          &::before {
            display: none;
          }

          &:hover {
            background-color: var(--color-lightest);
            color: var(--color-primary);

            @media only screen and (max-width: 1100px) {
              background-color: var(--color-primary);
              color: var(--color-lightest);
            }
          }

          span {
            position: relative;
            padding-left: 2.3em;

            &::before {
              position: absolute;
              top: 50%;
              left: 0;
              -webkit-transform: translateY(-50%);
                      transform: translateY(-50%);
              content: "\f0e0";
              font: normal 2rem "Font Awesome 6 Free";
            }
          }
        }
      }

      .contact_tel {
        text-align: center;

        .tel-number {
          font-size: min(calc(20 / 1200 * 100vw), 2.2rem);
          font-weight: 800;
          line-height: 1;
          margin-bottom: 8px;

          @media only screen and (max-width: 750px) {
            font-size: calc(22 / 375 * 100vw);
            margin-bottom: calc(15 / 375 * 100vw);
          }

          a {
            color: var(--color-primary);

            @media only screen and (max-width: 750px) {
              text-decoration: underline;
            }
          }
        }
        .tel_address {
          font-size: min(calc(14.5 / 1200 * 100vw), 1.6rem);;
          font-weight: 500;
          line-height: 1;

          @media only screen and (max-width: 750px) {
            font-size: calc(16 / 375 * 100vw);
          }
        }
      }
    }
  }
   
}
/* ===================================================================
  CSS information
  file name  :  animation.css
=================================================================== */
/* ---------------------------
汎用フェードアップ
--------------------------- */
.js-fadeUp { 
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: opacity .8s, -webkit-transform 0.8s;
  transition: opacity .8s, -webkit-transform 0.8s;
  transition: opacity .8s, transform 0.8s;
  transition: opacity .8s, transform 0.8s, -webkit-transform 0.8s;

  &.is-inview {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition-delay: .2s;
            transition-delay: .2s;
  }
}
/* ---------------------------
TOPイントロ ODEN
--------------------------- */
@-webkit-keyframes move-triangle {
  0% {
    left: -200px;
    opacity: 0;
  }
  100% {
    left: calc(50% - 530px);
    opacity: 1;
  }
}
@keyframes move-triangle {
  0% {
    left: -200px;
    opacity: 0;
  }
  100% {
    left: calc(50% - 530px);
    opacity: 1;
  }
}
@-webkit-keyframes move-triangle-sp {
  0% {
    top: 20px;
    left: -200px;
    opacity: 0;
  }
  100% {
    top: 20px;
    left: 10%;
    opacity: 1;
  }
}
@keyframes move-triangle-sp {
  0% {
    top: 20px;
    left: -200px;
    opacity: 0;
  }
  100% {
    top: 20px;
    left: 10%;
    opacity: 1;
  }
}
@-webkit-keyframes move-circle {
  0% {
    right: -200px;
    opacity: 0;
  }
  100% {
    right: calc(50% - 450px);
    opacity: 1;
  }
}
@keyframes move-circle {
  0% {
    right: -200px;
    opacity: 0;
  }
  100% {
    right: calc(50% - 450px);
    opacity: 1;
  }
}
@-webkit-keyframes move-circle-sp {
  0% {
    right: -500px;
    opacity: 0;
  }
  100% {
    right: -110%;
    opacity: 1;
  }
}
@keyframes move-circle-sp {
  0% {
    right: -500px;
    opacity: 0;
  }
  100% {
    right: -110%;
    opacity: 1;
  }
}
@-webkit-keyframes move-square {
  0% {
    left: -200px;
    opacity: 0;
  }
  100% {
    left: calc(50% - 370px);
    opacity: 1;
  }
}
@keyframes move-square {
  0% {
    left: -200px;
    opacity: 0;
  }
  100% {
    left: calc(50% - 370px);
    opacity: 1;
  }
}
@-webkit-keyframes move-square-sp {
  0% {
    top: 780px;
    left: -200px;
    opacity: 0;
  }
  100% {
    top: 780px;
    left: 10%;
    opacity: 1;
  }
}
@keyframes move-square-sp {
  0% {
    top: 780px;
    left: -200px;
    opacity: 0;
  }
  100% {
    top: 780px;
    left: 10%;
    opacity: 1;
  }
}
/* ---------------------------
ABOUTイントロ ODEN
--------------------------- */
@-webkit-keyframes about-triangle {
  0% {
    left: -10px;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 1;
  }
}
@keyframes about-triangle {
  0% {
    left: -10px;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 1;
  }
}
@-webkit-keyframes about-triangle-sp {
  0% {
    top: 20px;
    left: -200px;
    opacity: 0;
  }
  100% {
    top: 20px;
    left: 10%;
    opacity: 1;
  }
}
@keyframes about-triangle-sp {
  0% {
    top: 20px;
    left: -200px;
    opacity: 0;
  }
  100% {
    top: 20px;
    left: 10%;
    opacity: 1;
  }
}
@-webkit-keyframes about-circle {
  0% {
    right: -40px;
    opacity: 0;
  }
  100% {
    right: 50%;
    opacity: 1;
  }
}
@keyframes about-circle {
  0% {
    right: -40px;
    opacity: 0;
  }
  100% {
    right: 50%;
    opacity: 1;
  }
}
@-webkit-keyframes about-circle-sp {
  0% {
    right: -500px;
    opacity: 0;
  }
  100% {
    right: -110%;
    opacity: 1;
  }
}
@keyframes about-circle-sp {
  0% {
    right: -500px;
    opacity: 0;
  }
  100% {
    right: -110%;
    opacity: 1;
  }
}
@-webkit-keyframes about-square {
  0% {
    left: -40px;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 1;
  }
}
@keyframes about-square {
  0% {
    left: -40px;
    opacity: 0;
  }
  100% {
    left: 50%;
    opacity: 1;
  }
}
@-webkit-keyframes about-square-sp {
  0% {
    top: 780px;
    left: -200px;
    opacity: 0;
  }
  100% {
    top: 780px;
    left: 10%;
    opacity: 1;
  }
}
@keyframes about-square-sp {
  0% {
    top: 780px;
    left: -200px;
    opacity: 0;
  }
  100% {
    top: 780px;
    left: 10%;
    opacity: 1;
  }
}
/* ---------------------------
共通 背景アニメーション
--------------------------- */
.steam-container {
  width: 100%;
  height: 100vh;
  margin: 0px auto;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
  
  ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    li {
      position: absolute;
      display: block;
      list-style: none;
      width: 20px;
      height: 20px;
      background: rgba(160, 160, 160, 0.2);
      -webkit-animation: bg_animate 25s linear infinite;
              animation: bg_animate 25s linear infinite;
      bottom: -150px;

      &.triangle01 {
        left: 15%;
        width: 120px;
        height: 120px;
        clip-path: polygon(50% 0%, 0% 120px, 120px 120px);
        -webkit-animation-duration: 35s;
                animation-duration: 35s;
        -webkit-animation-delay: 0s;
                animation-delay: 0s;

        @media only screen and (max-width: 750px){
          clip-path: polygon(50% 0%, 0% calc(120 / 750 * 100vw), calc(120 / 750 * 100vw) calc(120 / 750 * 100vw));
          width: calc(120 / 750 * 100vw);
          height: calc(120 / 750 * 100vw);
        }
      }
      &.triangle02 {
        left: 50%;
        width: 80px;
        height: 80px;
        clip-path: polygon(50% 0%, 0% 80px, 80px 80px);
        -webkit-animation-duration: 22s;
                animation-duration: 22s;
        -webkit-animation-delay: 15s;
                animation-delay: 15s;

        @media only screen and (max-width: 750px){
          clip-path: polygon(50% 0%, 0% calc(80 / 750 * 100vw), calc(80 / 750 * 100vw) calc(80 / 750 * 100vw));
          width: calc(80 / 750 * 100vw);
          height: calc(80 / 750 * 100vw);
        }
      }
      &.triangle03 {
        left: 80%;
        width: 100px;
        height: 100px;
        clip-path: polygon(50% 0%, 0% 100px, 100px 100px);
        -webkit-animation-duration: 40s;
                animation-duration: 40s;
        -webkit-animation-delay: 10s;
                animation-delay: 10s;

        @media only screen and (max-width: 750px){
          clip-path: polygon(50% 0%, 0% calc(100 / 750 * 100vw), calc(100 / 750 * 100vw) calc(100 / 750 * 100vw));
          width: calc(100 / 750 * 100vw);
          height: calc(100 / 750 * 100vw);
        }
      }

      &.circle01 {
        left: 65%;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        -webkit-animation-duration: 40s;
                animation-duration: 40s;
        -webkit-animation-delay: 5s;
                animation-delay: 5s;

        @media only screen and (max-width: 750px){
          width: calc(120 / 750 * 100vw);
          height: calc(120 / 750 * 100vw);
        }
      }
      &.circle02 {
        left: 80%;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        -webkit-animation-duration: 70s;
                animation-duration: 70s;
        -webkit-animation-delay: 20s;
                animation-delay: 20s;

        @media only screen and (max-width: 750px){
          width: calc(110 / 750 * 100vw);
          height: calc(110 / 750 * 100vw);
        }
      }
      &.circle03 {
        left: 35%;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        -webkit-animation-duration: 22s;
                animation-duration: 22s;
        -webkit-animation-delay: 35s;
                animation-delay: 35s;

        @media only screen and (max-width: 750px){
          width: calc(150 / 750 * 100vw);
          height: calc(150 / 750 * 100vw);
        }
      }

      &.square01 {
        left: 85%;
        width: 160px;
        height: 160px;
        -webkit-animation-duration: 40s;
                animation-duration: 40s;
        -webkit-animation-delay: 0s;
                animation-delay: 0s;

        @media only screen and (max-width: 750px){
          width: calc(160 / 750 * 100vw);
          height: calc(160 / 750 * 100vw);
        }
      }
      &.square02 {
        left: 20%;
        width: 150px;
        height: 150px;
        -webkit-animation-duration: 22s;
                animation-duration: 22s;
        -webkit-animation-delay: 25s;
                animation-delay: 25s;

        @media only screen and (max-width: 750px){
          width: calc(150 / 750 * 100vw);
          height: calc(150 / 750 * 100vw);
        }
      }
      &.square03 {
        left: 50%;
        width: 110px;
        height: 110px;
        -webkit-animation-duration: 44s;
                animation-duration: 44s;
        -webkit-animation-delay: 50s;
                animation-delay: 50s;

        @media only screen and (max-width: 750px){
          width: calc(110 / 750 * 100vw);
          height: calc(110 / 750 * 100vw);
        }
      }
    }
  }
}
@-webkit-keyframes bg_animate {
    0%{
        -webkit-animation-delay: 0.001s;
                animation-delay: 0.001s;
        -webkit-transform: translateY(0) rotate(0deg);
                transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100%{
        -webkit-animation-delay: 0.001s;
                animation-delay: 0.001s;
        -webkit-transform: translateY(-1000px) rotate(720deg);
                transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
    }
}
@keyframes bg_animate {
    0%{
        -webkit-animation-delay: 0.001s;
                animation-delay: 0.001s;
        -webkit-transform: translateY(0) rotate(0deg);
                transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100%{
        -webkit-animation-delay: 0.001s;
                animation-delay: 0.001s;
        -webkit-transform: translateY(-1000px) rotate(720deg);
                transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
    }
}
/*# sourceMappingURL=style.css.map */