@charset "UTF-8";

/* reset
------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul,li{list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; text-decoration:none;}
table {border-collapse:collapse; border-spacing:0;}
input, select, img {vertical-align:middle;}
hr {display:block; height:1px; border:0; margin:1em 0; padding:0; border-top:1px solid rgba(0, 0, 0, 0.1);}

html		{font-size: 64.5%; height: 100vh; scroll-behavior: smooth; scroll-padding-top: 70px;}
body		{font-size: 15px; line-height: 2.0; background: #f0f3e7; color: var(--main-txt-color); font-family: "Noto Sans JP", 游ゴシック, YuGothic, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif; line-break: normal; word-break: auto-phrase; word-wrap: normal;}
input,select,textarea{font-size: 16px; font-family: "Noto Sans JP", 游ゴシック, YuGothic, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;}

body#home 			{background: #b9cada; transition: all 1s;}
body#home.invert	{background: #f0f3e7; transition: all 1s;}

:root{
	--main-txt-color: #333333;
	--sub-txt-color: #24bb9b;
	--main-btn-off: #24bb9b;
	--main-btn-on: #431ca9;
}
a			{color: #333; outline: none; transition: all 0.5s;}
a:hover		{color: #270ced;}
img.img		{border-radius: 10px;}

/* main
------------------------------------------------------------------------------*/

header						{display: flex; justify-content:space-between; width: 100%; padding: 50px 0 0; background: rgba(255,255,255, 0); position: sticky; top: 0; left: 0; z-index: 9999; transition: 0.3s;}
header .logo				{padding: 0 0 0 60px;}
header .logo a				{display: block; padding: 0;}
header .logo img			{height: 46px;}
header .navigation			{display: block; padding: 0 50px 0 0;}
header .navigation ul		{display: flex;}
header .navigation li		{display: block; font-weight: bold; margin: 0 10px;}
header .navigation a		{color: #333; padding:8px 10px; display: block;}
header .navigation a:hover	{color: #007fdd;}

header .navigation .contact a			{color: #fff; background: var(--main-btn-off); padding:8px 30px; display: block; border-radius: 6px;}
header .navigation .contact a:hover		{background: var(--main-btn-on);}
#contact header .navigation .contact	{display: none;}

.hamburger-menu							{display: none; width: 50px; height: 50px; position: relative; border: none; background: transparent; appearance: none; padding: 0; cursor: pointer;}
.hamburger-menubar						{display: inline-block; width: 44%; height: 2px; background: #242424; position: absolute; left: 50%; transform: translateX(-50%); transition: 0.3s;}
.hamburger-menubar:first-child 			{top: 16px;}
.hamburger-menubar:nth-child(2)			{top: 24px;}
.hamburger-menubar:last-child			{top: 32px;}
.hamburger-menu--open .hamburger-menubar				{top: 50%;}
.hamburger-menu--open .hamburger-menubar:first-child	{transform: translateX(-50%) translateY(-50%) rotate(45deg);}
.hamburger-menu--open .hamburger-menubar:last-child		{transform: translateX(-50%) translateY(-50%) rotate(-45deg);}
.hamburger-menu--open .hamburger-menubar:nth-child(2)	{display: none;}

footer						{padding: 30px 0 40px; font-size: 1.2rem; color: var(--main-txt-color); background: #f0f3e7; text-align: center; margin: 100px 0 0 0;}
footer i					{padding-right: 4px;}
footer ul li				{display: inline-block; margin: 0 10px;}
.copyright					{padding: 20px 0 0 0;}
.pagetop					{display: none; position: fixed; right: 25px; bottom: 15px; }
.pagetop a					{height: 50px; width: 50px; background: rgba(0, 0, 0, 0.3); border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2;}
.pagetop p					{height: 10px; width: 10px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: translateY(20%) rotate(-45deg);}

h1							{color: var(--sub-txt-color); font-size: 5rem; font-weight: 100; line-height: 1.2; margin-bottom: 40px;}
h1 strong					{color: var(--sub-txt-color); font-size: 4.3rem; font-weight: 900; letter-spacing: -0.2rem;}
h1 strong:first-of-type:after{content:'·';}
h2							{color: var(--sub-txt-color); font-size: 5rem; font-weight: 600; line-height: 1.4; padding: 30px 0 30px; text-align: center;}
h2 p						{color: var(--sub-txt-color); font-size: 1.6rem; font-weight: 400;}
h3							{font-size: 3rem; font-weight: 300; line-height: 1.5; margin: 0 0 20px 0;}
h3+p						{line-height: 1.6;}

.button						{margin: 30px auto;}
.button a					{display: inline-block; text-align: center; padding: 16px 30px; line-height: 1; text-decoration: none !important; color: #fff; background: var(--main-btn-off); font-size: 1.5rem; border-radius: 6px; transition: 0.3s;}
.button a:hover				{color: #fff; background: var(--main-btn-on);}

.main						{min-height: calc(100vh - 210px); margin-top: -96px;}
.main a						{text-decoration: underline;}
.box						{width:90vw; margin: 40px auto;}
.box-2c						{display: flex; justify-content: center;}
.box-2c .txt				{width: 65%;}
.box-2c .space				{width: 50px;}
.box-3c						{display: flex; justify-content: space-between;}
.box-3c section				{position: relative; overflow: hidden; width:27%; min-height: 150px; padding: 25px; border-radius: 20px;}
.box-3c section:after				{background: url('../img/services01.jpg'); background-size: cover; position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; left:0; transition: all 0.3s ease-out; z-index: -1;}
.box-3c section:nth-child(2):after	{background: url('../img/services02.jpg'); background-size: cover;}
.box-3c section:nth-child(3):after	{background: url('../img/services03.jpg'); background-size: cover;}
.box-3c article				{background: rgba(255, 255, 255, 0.5); padding: 15px; border-radius: 10px;}
.card						{width: calc(85vw - 80px); color: var(--main-txt-color); background: #fff; padding: 40px; border-radius: 20px; box-shadow: 0px 3px 20px rgb(0 0 0 / 5%);}

.cover						{position: relative; z-index: -2; top: 0; left: 0; overflow: hidden; width: 100%; height: 100vh; margin: 0 0 70px 0;}
.cover .copy				{position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 25px; width: fit-content; height: fit-content; margin: auto; text-align: center; color: #fff; font-family: "M PLUS 1p"; font-size: 4rem; font-weight: 900; line-height: 1.7; text-shadow: 1px 2px 0px rgb(0 0 0 / 10%);}
.cover .image img			{position: absolute; object-fit: cover; width: 100%; height: 100vh; z-index: -1;}
.cover video				{position: absolute; object-fit: cover; width: 100%; height: 100vh; z-index: -1; mix-blend-mode: color-dodge;}

.scroll_down		{position:absolute; bottom: 110px; right: 50%; animation: arrowmove 1s ease-in-out infinite;}
.scroll_down a		{position: absolute; left: -24px; bottom: -90px; color: #fff; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; width: 30px; height: 90px; text-decoration: none;}
.scroll_down .text	{display: block; margin-top: 70px; margin-left: -14px; font-size: 12px; color: #fff; text-transform: uppercase; white-space: nowrap; letter-spacing: 2px;}
.scroll_down .arrow	{position: absolute; width: 28px; height: 5px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); animation: move 3s ease-out infinite;}
.scroll_down .arrow:first-child		{animation: move 3s ease-out 1s infinite;}
.scroll_down .arrow:nth-child(2)	{animation: move 3s ease-out 2s infinite;}
.scroll_down .arrow:before,
.scroll_down .arrow:after			{content: ' '; position: absolute; top: 0; height: 100%; width: 51%; background: #fff;}
.scroll_down .arrow:before			{left: 0; transform: skew(0deg, 30deg);}
.scroll_down .arrow:after			{right: 0; width: 50%; transform: skew(0deg, -30deg);}
@keyframes move{
	25%{ opacity: 1; }
	33%{ opacity: 1; transform: translateY(30px); }
	67%{ opacity: 1; transform: translateY(40px); }
	100%{ opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
}

table.list					{width: 70vw; margin: 0 auto;}
table.list th				{padding: 20px 10px; border-bottom: 1px solid #ddd; color: #939393; font-weight: normal; vertical-align: middle;}
table.list td				{padding: 20px 10px; border-bottom: 1px solid #ddd;}

ol.number					{margin-left: 10px;}
ol.number li				{list-style-type: decimal; margin-left: 10px; padding-left: 5px;}

/* Fade in
------------------------------------------------------------------------------*/
.u-fade-in					{opacity: 0;}
.u-fade-in.is-active		{transition: .8s; opacity: 1;}

.u-fade-type-up				{transform: translateY(50px); opacity: 0;}
.u-fade-type-up.is-active	{transition: .6s; transform: translateY(0); opacity: 1;}

.u-fade-type-rl				{transform: translateX(50px); opacity: 0;}
.u-fade-type-rl.is-active	{transition: .6s; transform: translateX(0); opacity: 1;}

.u-fade-type-lr				{transform: translateX(-50px); opacity: 0;}
.u-fade-type-lr.is-active	{transition: .6s; transform: translateX(0); opacity: 1;}

.u-fade-type-zoom			{transform: scale(0.8); opacity: 0;}
.u-fade-type-zoom.is-active	{transition: .6s; transform: scale(1); opacity: 1;}


/* form
------------------------------------------------------------------------------*/
input						{margin: 0; padding: 10px; border: 0; outline: none;}

input,
select,
textarea					{color: var(--main-txt-color); background: #fff; font-size: 16px; width: calc(100% - 20px); padding: 10px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; transition: all 0.5s;}
select						{width: 100%;}
textarea					{height: 200px;}

input:focus,
select:focus,
textarea:focus				{outline: 1px solid rgba(0, 0, 0, 0.8);}

.buttons					{text-align: center;}

input[type="button"],
input[type="submit"],
input[type="reset"]					{background: var(--main-btn-off); border: none; color: #fff; border-radius: 6px; width: auto; padding: 12px 30px; cursor: pointer; transition: 0.3s;}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover			{color: #fff; background: var(--main-btn-on);}

.radioItem							{display: flex; align-items: center; column-gap: 4px; width: fit-content; line-height: 1; cursor: pointer;}
.radioItem:not(:last-of-type)		{margin-bottom: 15px;}
input.radioButton					{appearance: none; position: relative; width: 18px; height: 18px; border: 1px solid #bfbfbf; border-radius: 9999px; cursor: pointer;}
input.radioButton:checked::after	{content: ""; position: absolute; inset: 0; width: 10px; height: 10px; background: var(--main-txt-color); margin: auto; border-radius: 9999px;}

.hissu								{color: #ff0000;}


/* modal
------------------------------------------------------------------------------*/
.overlay		{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.6); display: none; z-index: 99999;}
.modal			{max-width: 60vw; width: 80vw; padding: 15px 20px; background: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; display: none; z-index: 99999;}
.modal .close	{position: absolute; top: 15px; right: 20px; cursor: pointer; font-size: 20px; width: 45px; text-align: center;}
.modal article	{overflow: auto; max-height: calc( 80vh - 70px ); padding: 10px; margin: 10px 0;}

/* アコーディオン
------------------------------------------------------------------------------*/
.accordion .toggle								{display: none;}
.accordion .Label								{font-size: 2.0rem; padding: 0.5em; display: block; border-bottom: 1px solid #ddd; border-left: 10px solid #f3f3f3; cursor: pointer;}
.accordion .Label::before						{content:""; width: 6px; height: 6px; border-top: 2px solid var(--main-txt-color); border-right: 2px solid var(--main-txt-color); -webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 10px; transform: rotate(135deg);}
.accordion .Label:hover							{border-bottom: 1px solid var(--sub-txt-color); border-left: 10px solid var(--sub-txt-color);}
.accordion .toggle:checked + .Label				{border-bottom: 1px solid var(--sub-txt-color); border-left: 10px solid var(--sub-txt-color)}
.accordion .Label,
.accordion .content								{-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.5s;}
.accordion .content								{height: 0; margin-bottom:10px; padding:0 20px; overflow: hidden;}
.accordion .toggle:checked + .Label + .content	{height: auto; padding: 20px; transition: all 0.5s;}
.accordion .toggle:checked + .Label::before		{transform: rotate(-45deg) !important;}

/* common
------------------------------------------------------------------------------*/
.clear		{clear: both;}

.f-serif	{font-family: "Shippori Mincho B1", serif;}
.f-marug	{font-family: "Zen Maru Gothic", serif;}
.fb			{font-weight:bold;}

.txt-c		{text-align:center;}
.txt-r		{text-align:right;}
.center		{margin:0 auto;}
.mg10		{margin:10px;}
.mg20		{margin:20px;}
.mg30		{margin:30px;}
.mg40		{margin:40px;}
.mg50		{margin:50px;}
.mgtb10		{margin:10px 0;}
.mgtb20		{margin:20px 0;}
.mgtb30		{margin:30px 0;}
.mglr10		{margin:0 10px;}
.mglr20		{margin:0 20px;}
.mglr30		{margin:0 30px;}
.mgr10		{margin-right:10px;}
.mgl10		{margin-left:10px;}
.mgt10		{margin-top:10px;}
.mgt20		{margin-top:20px;}
.mgt30		{margin-top:30px;}
.mgt40		{margin-top:40px;}
.mgt50		{margin-top:50px;}
.mgt60		{margin-top:60px;}
.mgt70		{margin-top:70px;}
.mgt80		{margin-top:80px;}
.mgt90		{margin-top:90px;}
.mgt100		{margin-top:100px;}
.mgb10		{margin-bottom:10px;}
.mgb20		{margin-bottom:20px;}
.mgb30		{margin-bottom:30px;}
.mgb40		{margin-bottom:40px;}
.mgb50		{margin-bottom:50px;}
.mgb60		{margin-bottom:60px;}
.mgb70		{margin-bottom:70px;}
.mgb80		{margin-bottom:80px;}
.mgb90		{margin-bottom:90px;}
.mgb100		{margin-bottom:100px;}
.pd10		{padding:10px;}
.pd20		{padding:20px;}
.pd30		{padding:30px;}
.pd40		{padding:40px;}
.pd50		{padding:50px;}
.pdt5		{padding-top:5px;}
.pdt10		{padding-top:10px;}
.pdt20		{padding-top:20px;}
.pdt30		{padding-top:30px;}
.pdt40		{padding-top:40px;}
.pdt50		{padding-top:50px;}
.pdt60		{padding-top:60px;}
.pdl10		{padding-left:10px;}
.pdl20		{padding-left:20px;}
.pdl30		{padding-left:30px;}
.pdl40		{padding-left:40px;}
.pdl50		{padding-left:50px;}
.pdl60		{padding-left:60px;}
.pdr10		{padding-right:10px;}
.pdr20		{padding-right:20px;}
.pdr30		{padding-right:30px;}
.pdr40		{padding-right:40px;}
.pdr50		{padding-right:50px;}
.pdr60		{padding-right:60px;}

ul.circle li		{list-style: disc; margin-left: 25px;}