@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

:root {

  /* media query */
  --media-screen-pc: 1024px;
  --media-screen-tablet: 640px;
  --media-screen-sp-max: 639px;
  --media-screen-sp-min: 480px;

  /* width */
  --width-pc: 1200;
  --width-tablet: 721;
  --width-sp: 375;

  /* color */
  --color-black: #111111;
  --color-white: #ffffff;
  --color-light-gray: #d9d9d9;
  --color-dark-gray: #7a7a7a;
  --color-bg: #F8F6F2;
  --color-accent: #0f1d52;

  /* font-family */
	--ff-regular:
		"Noto Sans JP",
		"Jost",
		"Yu Gothic",
		sans-serif;
	
	--ff-title:
/* 	  "Zen Kaku Gothic New", */
	  "Noto Sans JP",
	  "Yu Gothic",
	  sans-serif;
	
  	/* font-size */
	--fs-h1: clamp(64px, 7vw, 104px);
	--fs-h2: clamp(56px, 5.5vw, 80px);
	--fs-h3: clamp(34px, 4vw, 48px);
	--fs-h4: 24px;
	--fs-h5: 20px;
	--fs-h6: 18px;

	--fs-text: clamp(1.5rem, 1.2vw, 1.8rem);
	--fs-text-s: clamp(1.3rem, 1vw, 1.5rem);
	--fs-text-xs: 1.2rem;

  /* border */
  --border-main: 1px solid var(--color-light-gray);

  /* radius */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 999px;

  /* spacing */
  --space-xs: clamp(8px, 1vw, 12px);
  --space-s: clamp(16px, 2vw, 24px);
  --space-m: clamp(32px, 4vw, 48px);
  --space-l: clamp(64px, 7vw, 96px);
  --space-xl: clamp(96px, 10vw, 160px);

  /* container */
  --container: min(1280px, calc(100% - 80px));

  /* transition */
  --transition: .3s ease;

  /* z-index */
  --z-header: 1000;
  --z-modal: 9999;
}


/* ========================================
Common
======================================== */

html{
  font-size:62.5%;
  scroll-behavior:smooth;
}

body{
  position:relative;
  overflow-x:hidden;
  width:100%;
  font-family:var(--ff-regular);
  font-weight:300;
  letter-spacing:.04em;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{
  width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
  transition:var(--transition);
}

ul{
  list-style:none;
}

.container{
  width:var(--container);
  margin-inline:auto;
}


/* ========================================
Typography
======================================== */
h1,h2,h3{
	font-family: var(--ff-title) !important;
	letter-spacing: 0.04em !important;	
}

h4,h5,h6{
	font-family:var(--ff-regular);
	font-weight:300;
	line-height:1.5;
}

p,
li,
a,
span{
  font-size:var(--fs-text);
  line-height:1.7;
  word-break:normal;
  overflow-wrap:break-word;
}


/* ========================================
Section
======================================== */

section{
  position:relative;
  padding:var(--space-xl) 0;
}


/* ========================================
Utility
======================================== */

/* margin top */
.mt_0{ margin-top:0!important; }
.mt_10{ margin-top:var(--space-xs)!important; }
.mt_20{ margin-top:var(--space-s)!important; }
.mt_40{ margin-top:var(--space-m)!important; }
.mt_80{ margin-top:var(--space-l)!important; }

/* margin bottom */
.mb_0{ margin-bottom:0!important; }
.mb_20{ margin-bottom:var(--space-s)!important; }
.mb_40{ margin-bottom:var(--space-m)!important; }
.mb_80{ margin-bottom:var(--space-l)!important; }

/* margin x */
.mx_0{ margin:0!important; }
.mx_10{ margin:0 var(--space-xs)!important; }
.mx_20{ margin:0 var(--space-s)!important; }
.mx_40{ margin:0 var(--space-m)!important; }
.mx_80{ margin:0 var(--space-l)!important; }

/* padding x */
.px_10{ padding:0 var(--space-xs)!important; }
.px_20{ padding:0 var(--space-s)!important; }
.px_40{ padding:0 var(--space-m)!important; }
.px_80{ padding:0 var(--space-l)!important; }

/* background */
.bg-white{ background:var(--color-white)!important; }
.bg-gray{ background:var(--color-bg)!important; }

/* flex */
.flex{
  display:flex;
}

.flex-center{
  display:flex;
  justify-content:center;
  align-items:center;
}

.flex-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* ========================================
Button
======================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  padding:18px 32px;
  border-radius:var(--radius-l);
  background:var(--color-accent);
  color:var(--color-white);
  font-size:1.4rem;
  letter-spacing:.08em;
  transition:var(--transition);
}

.btn:hover{
  opacity:.8;
}


/* ========================================
Hero
======================================== */

.hero{
  overflow:hidden;
}

.hero-left{
  padding-left:100px;
}

.hero-title{
/*   max-width:5ch; */
  line-height:.95;
}

.hero-sub{
  letter-spacing:.12em;
  font-size:1.4rem;
}

.cf-turnstile{
	text-align:center;
	margin-bottom: 3rem;
}
/* ========================================
Responsive
======================================== */

@media (max-width: 767px){

  :root{
    --container:min(100% - 32px);
  }

  section{
    padding:80px 0;
  }

  .hero-left{
    padding-left:0;
  }

  .hero-title{
    max-width:none;
    line-height:1.02;
  }

  .btn{
    min-width:180px;
    padding:16px 24px;
  }

}


/*Slider*/
.logo-marquee {
/*   overflow: hidden; */
  width: 90vw;
/*   margin-left:calc(50% - 50vw); */
  padding: 20px;
}

.logo-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
  align-items: center;
}

.logo-track a {
  flex-shrink: 0;
  margin: 0 15px;
}

.logo-track img {
  height: 7em;
  width: auto;
  display: block;
/*   filter: grayscale(100%); */
  transition: .3s;
}

.logo-track img:hover {
  filter: grayscale(10%);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}