@charset "utf-8";

/* 
Base style
*/
body {
    font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}

p{
    text-align: justify;	
}
	
label, input, textarea, select, button {
    cursor: pointer;
}
button {
    border: 0;
}

.font-ryumin{
	font-family:ten-mincho-text, serif !important ;
}

.font-gothic{
	font-family: "Noto Sans JP"!important;
}

/* 
grid
*/
.grid {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid-item {
    list-style: none;
}
.grid-col-2 > .grid-item {
    width: 50%;
}
.grid-col-3 > .grid-item {
    width: 33.3%;
}
.grid-col-4 > .grid-item {
    width: 25%;
}
@media screen and (max-width: 768px){
    .grid {
        display: block;
    }
    .grid-col-2 > .grid-item,
    .grid-col-3 > .grid-item,
    .grid-col-4 > .grid-item {
        width: 100%;
        margin: 20px 0;
    }

}

/* 
section
*/
.section {
    padding: 30px 15px;
}

.section-about{
	padding: 100px 0;	
	font-family: a-otf-ryumin-pr6n, serif;	
	position:relative;	
	background-image: url("../img/back-about.png");
	background-repeat:no-repeat;
	background-size:cover;		
}

@media screen and (max-width: 768px){
.section-about{
	padding: 100px 20px 20px 20px;	
}
}

.about-sub{	
	font-size: 20px;	
	padding: 15px 0 0 0;
	margin: 10px 0 0 0;
}

.section.section-secounday {
    background: hsl(0, 0%, 94%);
}
.section-headline,.section-headline-center {
	line-height: 5rem;
    font-size: 40px;
    font-weight: bold;
    margin: 0 0 40px;
}

.section-headline-center {
    text-align: center!important;
}	

.section-headline-key{
    text-align: left;
    font-size: 30px!important;
    margin: 0 0 20px;
	text-align: justify;
}

.section-headline-under {
    text-align: left;
    font-size: 20px!important;
}

@media screen and (max-width: 768px){
.section-headline-under {
    font-size: 10px!important;
}
.section-headline-key{
    text-align: center!important;
    font-size: 22px!important;
}		
}	

.section-headline-under-sub {
	padding: 0 0 0 5rem!important;
}

.section-button {
    margin: 40px 0 0;
    text-align: center;
}
@media screen and (max-width: 768px){
    .section {
        padding: 20px 10px;
    }
	.section-headline,.section-headline-center {
        font-size: 30px;
        margin: 0 0 20px;
    }
    .section-button {
        margin: 20px 0 50px 0;
    } 
}

/* 
section-about-under
*/

.section-about-main-under{
	margin: -10px 0 0 0;
	padding: 100px 0;	
	position:relative;	
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    background-color: rgba(228,224,219,0.40);
	background-repeat:no-repeat;
	background-size:cover;		
}

.section-about-under{
	padding: 25px 0 0 0;	
	position:relative;	
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	background-color: #e4e0db;
	background-repeat:no-repeat;
	background-size:cover;		
}

.underline{
  border-bottom: 1px solid #000;
  padding-bottom: 20px;
  display: inline-block;
}

@media screen and (max-width: 2000px){
.underline{width: 10%;}
}

@media screen and (max-width: 1550px){
.underline{width: 12%;}
}

@media screen and (max-width: 1320px){
.underline{width: 15%;}
}

@media screen and (max-width: 1080px){
.underline{width: 20%;}
}

@media screen and (max-width: 768px){
.underline{width: 30%;}
}


/* 
section-business
*/

.section-business{
	color: #fff!important;	
}


/* 
header
*/
.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
}
.header-logo {
    margin: 20px ;
}
.header-logo > a {
    display: block;
    color: transparent;
}

@media screen and (max-width: 768px){
.header-logo {
    margin: 20px 0 0 0;
}		
}
	
/* .header-nav {} */
.header-navlist {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* .header-navitem {} */
.header-navitem > a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: border-color .25s;
}
.header-navitem > a:hover {
    border-bottom: 2px solid #333;
}
@media screen and (max-width: 768px){
    .header {
        font-size: 12px;
    }
}

/* 
hero
*/
.hero,.hero-un {
	width: 100%;
	height: 100vh;
    position: relative;
    overflow: hidden;
}
.hero > strong {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-48%, -50%);
    font-size: 120px;
	line-height:13rem;
    color: #fff;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: left;
}

.hero-un > strong {
	font-family: a-otf-ryumin-pr6n, serif;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    font-size: 24px;
	line-height:4rem;
    color: #fff;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: left;
}

.hero > strong > span {
    position: absolute;
    z-index: 3;
    top: 120%;
    left: 50%;
    transform: translate(-49%, -50%);
    font-size: 20px;
	line-height:3rem;
    color: #fff;
    font-weight: 400;
    display: block;
    width: 100%;
    text-align: left;
}

.hero-un > strong > span {
    position: absolute;
    z-index: 3;
    top: -30%;
    left: 50%;
    transform: translate(-49%, -50%);
    font-size: 15px;
	line-height:3rem;
    color: #fff;
    font-weight: 400;
    display: block;
    width: 100%;
    text-align: left;
}

.hero > video {
    position: absolute;
    z-index: 1;
    width: auto;
    height: 105%;
}

.hero-un > video {
    position: absolute;
    z-index: 1;
    width: auto;
    height: 105%;
}

.hero-particles {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}


.hero > video {
    position: absolute;
    z-index: 1;
    /* width: auto; を削除または 100% に変更 */
    width: 100%; /* コンテナの全幅に設定 */
    /* height: 105%; を削除または 100% に変更 */
    height: 100%; /* コンテナの全高に設定 */
    
    /* これが重要: アスペクト比を保ちつつコンテナ全体を覆う */
    object-fit: cover; 
}

/* 補足: 親要素 (.hero) の設定も確認 */
.hero {
    position: relative; /* videoのposition: absoluteの基準点にする */
    width: 100%; /* ページ幅全体に広げる */
    /* 適切な高さを設定 (例: ビューポートの高さ) */
    /* height: 100vh; /* 画面の高さ全体にしたい場合 */ 
    overflow: hidden; /* 動画のはみ出しを隠す */
}


@media screen and (max-width: 768px){
    .hero,.hero-un {
    }		
    .hero > strong {
        font-size: 40px;
        line-height:6rem;
    }
	
    .hero > strong > span {
        position: absolute;
        top: 180%;
        left: 50%;
        transform: translate(-49%, -30%);
    }
	
}

/* 
about
*/
.about {
    margin: 0;
    display: flex;
}
/* .about-image {} */
.about-caption {
    padding-left: 15px;
}
.about-headline {
    margin: 0 0 20px;
    font-size: 30px;
	font-family: a-otf-ryumin-pr6n, serif;	
}

.about-description,.about-description-sub{
	font-size: 14px;
	line-height:3rem;
}

.about-description-sub-span{
	font-weight: bold!important;
}

.about-description-sub{
	line-height:2rem!important;
}

/* .about-description {} */
@media screen and (max-width: 768px){
    .about {
        display: block;
    }
    .about-image {
        max-width: 100%;
        margin-bottom: 20px;
    }
    .about-headline {
        font-size: 20px;
        text-align: center;
        margin: 0 0 20px;
    }
}


/* 
section-value
*/

.section-value{
	padding: 100px 0;	
	font-family: a-otf-ryumin-pr6n, serif;	
    background: hsl(0, 0%, 94%);
}

@media screen and (max-width: 768px){
.section-value{
	padding: 100px 20px;	
}
}

/* 
about-peeps
*/
.about-peeps{
	background-color:  #eee;
	padding: 20px;
	margin: 0 0 60px 0;
}



/* 
feature
*/
.feature {
    text-align: center;
    padding: 0 15px;
}
.feature-headline {
    font-weight: bold;
    margin: 0 0 20px;
}
.feature-img {
    margin: 0 0 20px;
}
.feature-description {
    margin: 0;
    text-align: left;
}

/* 
card
*/
.card {
    padding: 0 10px;
}
.card-link {
    display: block;
    color: #333;
    text-decoration: none;
    position: relative;
    transition: background-color .25s;
}
.card-link:hover {
    background-color: #eee;
}
.card-label {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #999;
    color: #fff;
    display: block;
    padding: 5px 10px;
    font-size: 12px;
}
.card-image {
    width: 100%;
    height: auto;
}
.card-info {
    padding: 5px 10px;
}
/* .card-time {} */
.card-headline {
	font-size: 19px;
    margin: 0;
	line-height: 3rem;
}
.card-description {
    margin: 0;
}

/* 
avator
*/
.avator {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: start;
    padding: 10px;
}
.avator-name {
    font-weight: bold;
    padding-left: 15px;
}
.avator-image {
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
}

/* 
button
*/

.top-button {
    display: inline-block;
    color: #333;
    font-weight: bold;
    text-align: center;
    padding: 15px 60px;
    text-decoration: none;
    border: 0.5px solid;
    border-color:  #333;	
}

.button {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    background-color: #333;
    text-align: center;
    padding: 15px 60px;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 5px 5px 0 #bbb;
    transition: box-shadow .25s;
}
.button:hover {
    box-shadow: 0 0 0 #bbb;
}
.button.button-submission {
    background: #92d3ca;
}

/* 
.select, .input, .radio, .textarea
*/
.select {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    min-width: 500px;
}
.input {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    min-width: 500px;
}
.radio {
    margin: 0 10px;
}
.textarea {
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    min-width: 500px;
    min-height: 100px;
}
@media screen and (max-width: 768px){
    .select,
    .input,
    .textarea {
        min-width: auto;
        width: 100%;
    }
}

/* 
form
*/
/* .form {} */
.form-table {
    margin: 0 auto;
}
/* .form-table tr {} */
.form-table th {
    padding: 10px;
    text-align: left;
}
.form-table td {
    padding: 10px;
}
.form-button {
    margin-top: 20px;
    text-align: center;
}
@media screen and (max-width: 768px){
    .form-table,
    .form-table tbody,
    .form-table tr,
    .form-table th,
    .form-table td {
        display: block;
    }
}

/* 
works
*/
.works {
    margin: 40px 0;
    padding: 20px;
    text-align: center;
}
.works > img {
    margin: 0 15px;
}
@media screen and (max-width: 768px){
    .works {
        margin: 20px 0;
        padding: 10px;
    }
    .works > img {
        width: 100px;
        margin: 5px;
    }
}

/* 
footer
*/
.footer {
    background-color: #333;
    color: #fff;
}
.footer-map {
    margin: 0;
    padding: 40px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-map > iframe {
    width: 60%;
}
.footer-mapinfo {
    width: 40%;
    padding: 15px;
}
.footer-maplogo {
    font-size: 25px;
    font-weight: bold;
}
.footer-maplogo > svg {
    fill: transparent;
    margin-right: 10px;
}
.footer-mapaddress {
    font-style: normal;
}
.footer-mapaddress > a {
    color: #fff;
}
.footer-line {
    border-color: #444;
}
.footer-copy {
    display: block;
    text-align: center;
    padding: 10px;
}
@media screen and (max-width: 768px){
    .footer-map {
        padding: 15px;
        display: block;
    }
    .footer-map > iframe {
        width: 100%;
        height: 200px;
    }
    .footer-mapinfo {
        width: 100%;
        text-align: center;
    }
}

.b-box{
    margin: auto;
    padding:20px auto;
	color: #fff!important;
	display: inline-block;
    top: 0%;
    left: 0%;
    transform: translate(50%, 0%);	
	width: 50%;
	height: 50px;
	border-radius: 2px;
}

.b-box.bule{
	background-color: #7178a7;		
}

.b-box.yellow{
	background-color: #d4e039;;		
}

.b-box.orange{
	background-color: #cc5917;		
}

.b-box-text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.b-box-text-02{
	font-size: 16px;
	font-weight: 700;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px){	
.b-box{
	width: 80%;
    transform: translate(12.5%, 0%);	
}	
.b-box-text-02{
    text-align: center;
}
}

.b-box-inner{
	display: inline-block;
	margin: 20px 0 0 0 ;
	padding: 0 160px 30px 160px;
}

.b-box-inner p{
	margin: 20px 0;
	font-size: 16px;
	color: #fff!important;	
}

@media screen and (max-width: 768px){	
.b-box-inner p{
	margin: 20px 0 50px 0;
}	
}

@media screen and (max-width: 3500px){
.b-box-inner{padding: 0 220px 30px 220px;}		
}

@media screen and (max-width: 1900px){
.b-box-inner{padding: 0 120px 30px 120px;}		
}

@media screen and (max-width: 1400px){
.b-box-inner{padding: 0 60px 30px 60px;}		
}

@media screen and (max-width: 1200px){
.b-box-inner{padding: 0 20px 30px 20px;}		
}

@media screen and (max-width: 768px){
.b-box-inner{padding: 0 20px 30px 20px;}		
}


/* 
section-achievement
*/

.section-achievement{
	padding: 100px 0;	
}


@media screen and (max-width: 768px){
.section-achievement{
	padding: 100px 20px;	
}
}

/* 
margin
*/

.under-margin-top{
  margin: 10rem 5rem 0rem 5rem !important;	
}

.under-margin{
  margin: 25rem 5rem 25rem 5rem !important;	
}

/* 
btn
*/

.main-btn a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 2.5em 2em;
  width: 200px;
  color: #333;
  font-size: 1.15rem;
  font-weight: 700;
  transition: 0.3s;
  border: 0.5px solid;
  border-color:  #333;
}

.main-btn a::before {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  right: 1em;
  transform: translateY(calc(-50% - 2px)) rotate(30deg);
  width: 12px;
  height: 2px;
  background-color: #2285b1;
  transition: 0.3s;
}

.main-btn a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  width: 35px;
  height: 2px;
  background-color: #2285b1;
  transition: 0.3s;
}

/* 
ヘッダーメニュー
*/

/*　上に上がる動き　*/

#header.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/

#header.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

/* 
お問合せ
*/
.contact-px{
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

@media screen and (max-width: 768px){
.contact-px{
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}
}

.contact-text-size{
	font-size: 3rem!important;
}
@media screen and (max-width: 768px){
.contact-text-size{
	font-size: 2rem!important;
}
}

/* 
追従お問合せ
*/

.line-menu {
    position: fixed;
    z-index: 10;
    bottom: 20px!important;
	right: 16px!important;
}