/* 全体設定 */
/* アニメーション */
.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
}

.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

/* すべての要素に対してmarginとpaddingを0にリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* よく使われる設定、ボックスモデルを整える */
}
body{
    background-image: url('../images/bg-ptn01.webp');
}
ul {
  list-style: none;
}
a{
    text-decoration: none;
}
/* 余白関係 */
section,footer{
    padding: 50px 30px;
}

.content{
    margin-top: 70px;
    margin: 100px auto;
    column-gap: 80px;
    width: 90%;
}

p{
    margin-top: 30px;
}
h4,footer h3{
    letter-spacing: 0.3em;
    line-height: 2;
}

.infomation-section p{
    margin-top: 100px;
}


/* 全体の文字色、フォントサイズまとめ */
h3,h4{
    font-size: 25px;
}

h3,h4{
    color: rgba(69, 137, 203, 1);
}
.mail span,.mainvisual h2,footer h3{
    color: white;
}
.infomation-section h3,p,span,li,.box{
    color: rgba(51, 51, 51, 1);
}
.header-logo,.mail span,.box span,footer span,small{
    font-size: 10px;
}
.navigation li,.navigation span{
    font-size: 13px;
}
.mainvisual h2{
    font-size: 40px;
}
.header-logo span,footer span{
    font-family:'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}

.question-section li{
    font-size: 20px;
}


/* ヘッダー */

#header,.header{
    display: none;
}

header{
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; 
    top: 0;         
    left: 0;        
    width: 100%;    
    z-index: 1000; 
    background-image: url('../images/bg-ptn01.webp');
}

.header-logo,nav,.mail,.telelogo,.content,.contact,.copyright{
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: center;     /* 垂直中央 */
}

.header-logo div,.mailline,.mainvisual,a,.infomation-section{
    display: flex;
    flex-direction: column;    /* 縦並び */
    align-items: center;       /* 横方向の中央揃え（左右中央） */
    justify-content: center;   /* 縦方向の中央揃え（必要に応じて） */
  /* 必要に応じて追加のスタイル */
}
.header-logo{
    width: 130px;
    height: 90px;
}
.header-logo{
    display: block;
}
/* ナビゲーションメニュー */
nav{
    width: 45%;
}
.navigation{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 100%;
  padding: 5px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  border: none;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: rgba(69, 179, 204, 1);
  box-shadow: 0px 0px 5px 5px rgba(69, 179, 204, 1);
  color: #fff;
}

/* メインビジュアル */
.mainvisual{
    background: url('../images/mainvisual.png') no-repeat center;
    width: 100%;
    height: 870px;
    position: relative;
}
.mainvisual h2{
    width: 70%;
}
.mainvisual img{
    width: 100%;
}
.text{
    text-align: center;
    letter-spacing: 0.3em;
    line-height: 2;
    position: relative;
}
.content img{
    width: 40%;
}


/*  デコレーション*/
.feature-section h3::before,.service-section h3::before,.company-section h3::before,footer h3::after,.service h3::before{
    content: "";
    display: block;
    position: absolute;
}

.feature-section h3::before{
    background:url('../images/Feature.png')no-repeat center;
    top: -20%;
    left: 60%;
    background-size: contain;
    width: 250px;
    height: 100px;
}
.service-section h3::before{
    background:url('../images/Service.png')no-repeat center;
    top: -10%;
    left: 50%;
    background-size: contain;
    width: 250px;
    height: 100px;
}
.company-section h3::before{
    background:url('../images/Company.png')no-repeat center;
    top: -5%;
    left: 50%;
    background-size: contain;
    width: 250px;
    height: 100px;
}


/* ボタンの装飾 */
.service-btn{
    display: block;
    margin: 30px auto;
    width: 180px;
    position: relative;
}
.box{
    display: inline-block;
    width: 100%;
    height: 35px;
    border: solid 1px rgba(51, 51, 51, 1);
}

.btn-decoration{
    position: absolute;
    top: 5%;
    left: 0%;
    width: 180px;
    height: 35px;
    z-index: -1;
    background-color: rgba(69, 179, 204, 1);
    filter: blur(4px);
    transform: translate(10px, 10px); /* 左斜め上に少しずらす */
    transition: transform 0.5s ease; /* アニメーションの設定 */
}

.service-btn:hover .btn-decoration{
    transform: translate(0, 0); /* 左斜め上に動く（元の位置に戻す） */
}

/* フッター */
.union::before{
    position: absolute;
    display: block;
    content: "";
    height: calc(160px / 2);
    width: 100%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    top: -79px;
    background-color: rgba(69, 137, 203, 1);

}

.union{
    position: relative;
    display: block;
    width: 100%;
    background-color: rgba(69, 137, 203, 1);
    height: auto;
    margin: 0 auto;
    right: 0;
    left: 0;
    padding: 10px 0;
}

footer h3{
    display: flex;
    justify-content: center; /* 水平中央 */
    text-align: center;
    font-size: 25px;
}
.contact a{
    width: 25%;
    margin: 10px 40px;
}

footer h3::after{
    content: "";
    display: block;
    position: absolute;
    background: url('../images/Contact.png')no-repeat center;
    top: -10%;
    left: 60%;
    background-size: contain;
    width: 250px;
    height: 100px;
}

.contact img,.mailaction,.telelogo{
    box-shadow: 5px 5px 5px rgba(49, 106, 162, 1);
}

.contact img:hover,.mailaction:hover,.telelogo:hover{
    transform: translateY(4px);
    box-shadow: none;
}

/* 各ページトップ */
.mainvisual-2{
    background: url('../images/main2.png') no-repeat center;
    width: 100%;
    height: 380px;
    position: relative;
    margin-top: 110px;
}

.mainvisual-2 img{
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
}

/* サービス案内 */
h3,.service li,dt,dd{
    text-align: center;
    letter-spacing: 0.3em;
    line-height: 2;
}

.service .content{
    position: relative;
}

.service h3::before{
    background: url('../images/Service.png') no-repeat center;
    top: -35%;
    left: 60%;
    background-size: contain; 
    width: 250px; 
    height: 100px; 
}

.service p{
    margin-top: 0px;
}


.colum-2,.colum-3{
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: flex-start;
}

.service li{
    margin-top: 60px;

}

.colum-2 p,.colum-3 p{
    width: 55%;
    padding: 20px;
    border-top: solid 1px rgba(69, 137, 203, 1);
    display: inline-block;
}

.question-section div{
    margin: 50px;
}

.question-section p{
    display: flex;
    margin-top: 0;
}

.question-section img{
    display: inline-block;
}



dt{
    margin: 20px auto;
    width: 90%;
    background-color: rgba(169, 202, 234, 1);
    display: flex;
    align-items: center;
}

dt img,dd img{
    width: 40px;
    padding: 5px;
}

dd{
    margin: 20px auto;
    width: 90%;
    background-color: none;
    display: flex;
    align-items: center;

}

/* 会社概要 */

.company-section .text{
    width: 30%;
}

table{
    margin: 100px;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: center;     /* 垂直中央 */
}

th,td{
    padding: 1em;
    border: 1px solid #D3D3D3;
    vertical-align: middle;
}

.table,th {
    background-color: rgba(69, 137, 203, 1);
    color: #fff;
}

/* お問い合わせ */

.infomation-section h3,.thanks h3{
    position: relative;
    font-size: 20px;
}


.infomation-section{
    row-gap: 80px;
}

.infomation-section p{
    margin-top: 0;
}

.infomation-section h3{
    margin-top: 30px;
}

.infomation-section img{
    width: 80%;
}

/* コンタクトフォーム */

.form br{
    display: none;
}


.wpcf7{

    background-color: rgba(230, 243, 255, 1);
    width: 80%;
    margin: 0 auto 100px;
    padding: 40px 0;
}

.form{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    align-items: center;

}

.contact-tag{
    width: 20%;
    display: flex;
    align-items: center;
}

.contact-tag p{
    margin-top: 20px;
}


p:has(.input){
    width: 60%;
    margin-top: 0;
}

.input{
    width: 100%;
    padding: 1.1em;
}

.must{
    color: rgba(194, 34, 34, 1);
    border: solid 1px rgba(194, 34, 34, 1);
    background-color: #fff;
    margin: 0 10px;
}

.optional{
    color: gray;
    border: solid 1px gray;
    background-color: #fff;
    margin: 0 10px;

}

.submitb-t-n{
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: center;     /* 垂直中央 */
    height: 0;
    margin-top: 50px;
}

.wpcf7-form-control,.wpcf7-submit,.has-spinner{
    width: 100%;
}

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

.mainvisual-2{
    background: url('../images/main2.png') no-repeat center;
    width: 100%;
    height: 230px;
    position: relative;
    margin-top: 110px;
    background-size: contain;
}

.mainvisual-2 img{
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
}


.telelogo,.mailaction{
    width: 150px;
    box-shadow:none;
}
.header-logo{
    width: 100px;
}
.header-logo img{
    width: 100%;
}

.header-logo span{
    font-size: 8px;
}

#pc-header{
    display: none;
}

#header,.hesder{
    display: inline;
    width: 50px;
}
    
.header {
    height: fit-content;
    background-color: rgba(255, 255, 255, 1);
    width: 100%;
    z-index: 1000;
}

/* ハンバーガーメニュー */
#header-hamburger {
    /* 見た目のCSS */
    background: rgba(69, 137, 203, 1);
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    z-index: 10;
}

/* 三本線 */
#header-hamburger span {
    /* 見た目のCSS */
    display: inline-block;
    background: #fff;
    width: 50%;
    height: 2px;
    /* バーガー線の太さ */
    /*アニメーションの設定*/
    transition: all .4s;
    position: absolute;
    left: 50%;
    /* バーガー線の位置 */
    transform: translateX(-50%);
}

#header-hamburger span:nth-of-type(1) {
    top: 30%;
}

#header-hamburger span:nth-of-type(2) {
    top: 50%;
}

#header-hamburger span:nth-of-type(3) {
    top: 70%;
}

/* ------------------ */
/* ×印 */
/* ------------------ */
/*activeクラスが付与されると線が回転して×になる*/
#header-hamburger.active span:nth-of-type(1) {
    top: 50%;
    left: 25%;
    transform: rotate(-45deg);
    width: 50%;
}

#header-hamburger.active span:nth-of-type(2) {
    opacity: 0;
}

#header-hamburger.active span:nth-of-type(3) {
    top: 50%;
    left: 25%;
    transform: rotate(45deg);
    width: 50%;
}

/* ----------------------------------------------- */
/* メニューウィンドウ */
/* -------------------------- */
#hamburger-window {
    transition: 0.3s;
    text-align: center;
    /* 初期状態は非表示 */
    visibility: hidden;
    position: fixed;
    top: 50px;
    right: -100vw;
    z-index: 1;
    /* 画面いっぱいに表示されるサイズに設定 */
    width: 100%;
    height: calc(100vh - 50px);
    /* 画面からはみ出したらスクロール可能にする */
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*スクロールバー非表示（Chrome・Safari）*/
.content::-webkit-scrollbar{
    display:none;
}

#hamburger-window.open {
    visibility: visible;
    right: 0;
}

.hamburger-window__link {
    display: block;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.hamburger-window__link:hover {
    background-color: #ccc;
}

.hamburger-window__link:first-child .menu-link {
    border-top: 1px solid #ccc;
}

.menu-link {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 23px 0 23px 5%;
    color: #333;
}    

.hamburger-window__link::after {
    /* fontawesomeアイコンを表示 */
    content: '\f054';
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    display: inline-block;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    aspect-ratio: 1/1;
    color: #333;
}

.hamburger-window__title {
    color: #333;
} 

.content,.colum-2,.colum-3{
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}

.content .text{
    width: 100%;
    margin-top: 80px;
}
.content img{
    width: 70%;
    margin-top: 50px;
}

table{
    margin: 100px 5px;
}

th,td{
    padding: 0.5em;
}

/* コンタクトフォーム */

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

.wpcf7-form-control,.wpcf7-submit,.has-spinner{
    margin-top: 15px;
}

.contact-tag{
    width: 50%;
}

}

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

.mainvisual-2{
    background: url('../images/main2.png') no-repeat center;
    width: 100%;
    height: 95px;
    position: relative;
    margin-top: 110px;
    background-size: contain;
}

.mainvisual-2 img{
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
}


h3,footer h3,.infomation-section h3,h4{
    font-size: 15px;
}
p{
    font-size: 10px;
}

.telelogo,.mailaction,.header-logo{
    width: 100px;
}

header{
    padding: 10px 10px;
}


.feature-section h3::before{
    background:url('../images/Feature.png')no-repeat center;
    top: -10%;
    left: 65%;
    background-size: contain;
    width: 80px;
    height: 40px;
}
.service-section h3::before{
    background:url('../images/Service.png')no-repeat center;
    top: -10%;
    left: 60%;
    background-size: contain;
    width: 100px;
    height: 50px;
}
.company-section h3::before{
    background:url('../images/Company.png')no-repeat center;
    top: -10%;
    left: 50%;
    background-size: contain;
    width: 80px;
    height: 60px;
}

footer h3::after{
    background: url('../images/Contact.png')no-repeat center;
    top: -20%;
    left: 70%;
    background-size: contain;
    width: 70px;
    height: 50px;
}

.service h3::before{
    background: url('../images/Service.png') no-repeat center;
    top: -25%;
    left: 75%;
    background-size: contain; 
    width: 80px; 
    height: 60px; 
}



.colum-2 img,.colum-3 img{
    width: 300px;
    height: 300px;
}

.copyright img{
    width: 20px;
}

small{
    font-size: 5px;
}
}
@media screen and (min-width: 2000px) {
    .mainvisual{
    background: url('../images/mainvisual.png') no-repeat center;
    background-size: 80%;
    width: 100%;
    height: 1200px;
    position: relative;
}
.mainvisual h2{
    width: 70%;
}
.mainvisual img{
    width: 100%;
}
.text{
    text-align: center;
    letter-spacing: 0.3em;
    line-height: 2;
    position: relative;
}
.content img{
    width: 40%;
}

}