/* 全体のスタイル */
body{
    font-family: '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ヘッダー */
header{
    background-color : #000082;
    color : #ffffff;
    padding : 0px 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 他の要素の上に表示するため */
}



header #logo img{
    height: 50px;
}

header nav ul{
    list-style: none;
    display: flex;
    gap: 1rem;
}

header nav ul li a{
    color: #fff;
    text-decoration: none;
    padding: 0.5rem;
  border-left-width : 1px;
  border-right-width : 1px;
  border-left-style : solid;
  border-right-style : solid;
  border-left-color : silver;
  border-right-color : silver;
  position : relative;
  overflow : auto;
}

header nav ul li a:hover{
    background-color: #555;
    border-radius: 5px;
}

/* ハンバーガーメニューのスタイル */
.hamburger{
    font-size: 0;
    position: absolute; /* 絶対位置で配置 */
    top: 10px; /* ヘッダーの上からの距離を調整 */
    right: 50px; /* 右端からの距離を調整 */
    width: 40px;
    height: 20px;
    display: none; /* デフォルトでは非表示 */
    cursor: pointer;
    border: none;
    background: none;
}

.hamburger span{
    display: block;
    width: 100%;
    height: 4px;
    background-color: #fff;
    margin: 4px 0;
    transition: all 0.3s ease;
}


/* モバイル表示 768px*/
@media (max-width: 750px) {
    /* モバイルではロゴを左端に */
    header #logo{
        margin-right: auto; /* ロゴを左端に固定 */
    }
    
    /* 通常のメニューを非表示にする */
    header nav ul{
        display: none;
        flex-direction: column;
        position: absolute;
        right: 0;
        background-color: #000082;/*#444*/
        width: 100%;
    }

    header nav ul.active{
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;
    }

    /* ハンバーガーメニューをモバイル時に表示する */
    .hamburger{
        display: block;
    }

}

.cp_box1{
  position: relative;
}
.cp_box1 input{
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.cp_box1 label{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: -10px;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
/* 開いた時にグラデーションを消す */
.cp_box1 input:checked + label{
  background: inherit;
}
.cp_box1 input:checked + label {
  /* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.cp_box1 .cp_container{
  overflow: hidden;
  height: 250px; /* 開く前に見えている部分の高さ */
  transition: all 0.5s;
}
/*続きをよむボタン*/
.cp_box1 label::after,
.cp_box1 label::before{
  content: '';
  position: absolute;
  line-height: 2.5rem;
}
.cp_box1 label::after{
  z-index: 2;
  bottom: 20px;
  width: 13em;
  content: '続きをよむ';
  color: #ffffff;
  background: #1b2538;
  border-radius: 20px;
}
.cp_box1 label::before{
  position: absolute;
  bottom: 38px;
  left: calc(50% - 3.5em);
  z-index: 3;
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.cp_box1 input:checked + label::after{
  content: '閉じる';
}
.cp_box1 input:checked + label:before {
  left: calc(50% - 2.5em);
  transform: scale(1, -1);
}
.cp_box1 input:checked ~ .cp_container{
  height: auto;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}

/* ファーストビュー */
#first-view{
    background-color: #005f99;
    color: #fff;
    text-align: center;
    padding: 0 20px;
    height: 100vh; /* 画面の高さ全体に設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#first-view h1{
    font-size: 4rem;
    margin-bottom: 1rem;
}

#first-view p{
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #first-view h1{
        font-size: 2.5rem; /* 小さく調整 */
    }

    #first-view p{
        font-size: 1.2rem; /* 小さく調整 */
    }
}

.fv-button{
    background-color: #32CD32;
    color: #fff;
    padding: 10px 80px;
    margin-top: 30px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
}

.fv-button:hover{
    background-color: #2E8B57;
}



/* お悩みセクション */
#problems{
    text-align: center;
    padding: 60px 60px;
}

#problems h2{
    font-size: 2rem;
    margin-bottom: 40px;
    margin-top: 96px;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #problems h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 30px; /* 必要に応じてマージンも調整 */
    }
}

.problem-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.problem-item{
    flex: 1;
    max-width: 300px;
    text-align: center;
}

.problem-image{
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}

.problem-item p{
    font-size: 1.2rem;
    color: #666;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    /* 特徴セクションの縦並び */
    .problem-grid {
        flex-direction: column;
        align-items: center;
    }

    .problem-item{
        max-width: 100%;
        margin-bottom: 20px;
    }
}

/* 約束セクション */
#promise{
    position: relative;
    padding: 60px 20px;
    margin-top: 64px;
    background-color: #005f99;
    text-align: center;
}

/* ▽を作成 */
#promise::before{
    content: "";
    position: absolute;
    bottom: -20px; /* ボックスの上に配置 */
    left: 50%;
    transform: translateX(-50%);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #005f99; /* 三角形の色を背景と同じに */
}

#promise h2{
    font-size: 2rem;
    margin-bottom: 20px;
    color: #ffffff;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #aaa h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 10px; /* 必要に応じてマージンも調整 */
    }
}

/* 特徴セクション */
#features{
    text-align: center;
    padding: 60px 60px;
    background-color: #ffffff;
}

#features h2{
    font-size: 2rem;
    margin-bottom: 40px;
    margin-top: 96px;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #features h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 30px; /* 必要に応じてマージンも調整 */
    }
}

#features p{
    font-size: 1rem;
    margin-bottom: 40px;
    color: #666;
}

.feature-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
}

.feature-item{
    flex-basis: calc(33.333% - 40px); /* 3列になるように設定 */
    max-width: calc(33.333% - 40px);  /* 3列での最大幅を設定 */
    box-sizing: border-box; /* パディングとボーダーを含めて幅を計算 */
    margin-bottom: 20px; /* 行の間隔を調整 */
}


.feature-icon{
    width: 80px;
    height: 80px;
    background-color: #005f99;
    color: #fff;
    font-size: 1.5rem;
    line-height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-item h3{
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.feature-item p{
    font-size: 1rem;
    color: #666;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    /* 特徴セクションの縦並び */
    .feature-grid {
        flex-direction: column;
        align-items: center;
    }

    .feature-item{
        max-width: 100%;
        margin-bottom: 20px;
    }
}



/* 料金セクション */
#pricing{
    text-align: center;
    padding: 40px 60px;
    background-color: #e5e5e5;
    margin-top: 64px;
}

#pricing h2{
    font-size: 2rem;
    margin-bottom: 40px;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #pricing h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 30px; /* 必要に応じてマージンも調整 */
    }
}

.pricing-grid{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.pricing-item{
    border: 2px solid #333;
    padding: 10px 60px;
    font-size: 1.2rem;
    background-color: #fff;
}

.plus-sign{
    font-size: 3rem;
    color: #333;
}

.pricing-description{
    font-size: 1rem;
    color: #333;
    margin: 0 auto;
    text-align: left;
}

/* レスポンシブ対応（768px以下の場合） */
@media (max-width: 768px) {
    .pricing-grid {
        flex-direction: column;
        gap: 10px;
    }


}


/* お客様の声セクション */
#testimonials{
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#testimonials h2{
    margin-bottom: 40px;
    font-size: 2rem;
    margin-top: 96px;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #testimonials h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 30px; /* 必要に応じてマージンも調整 */
    }
}

.testimonial{
    margin-bottom: 60px;
    font-size: 1.2rem;
}

.testimonial p{
    font-style: italic;
}

.testimonial span{
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #555;
}




/* ご利用の流れセクション */
#flow{
    padding: 60px 60px;
    background-color: #f9f9f9;
    margin-top: 64px;
}

#flow h2{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #flow h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 30px; /* 必要に応じてマージンも調整 */
    }
}

.flow-step{
    margin-bottom: 20px;
}

.flow-step h3{
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.flow-step p{
    font-size: 1rem;
    color: #666;
}



/* F&Qセクション */
#faq{
    padding: 60px 40px;
}

#faq h2{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 96px;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #faq h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 30px; /* 必要に応じてマージンも調整 */
    }
}


#faq dl{
    margin: 0;
    padding: 0;
}

#faq dt{
    font-weight: bold;
    background-color: #005f99;
    color: #fff;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}



/* お問い合わせフォーム */

#contact{
    text-align: center;
    padding: 60px 20px;
    background-color: #005f99;
    margin-bottom:0;
    margin-top: 64px;
}

#contact h2{
    font-size: 2rem;
    margin-bottom: 40px;
    color: #fff;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #contact h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 30px; /* 必要に応じてマージンも調整 */
    }
}


#contact form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact form label{
    margin-bottom: 10px;
    font-weight: bold;
    color: #fff;
}

#contact form input, #contact form textarea{
    width: 100%;
    max-width: 600px;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

#contact form button{
    background-color: #32CD32;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
}

#contact form button:hover{
    background-color: #2E8B57;
}

/* 会社概要セクション */
#company-profile{
    padding: 40px;
    max-width: 80%;
    margin: 0 auto;
}

#company-profile h2{
    text-align: center;
    margin-bottom: 40px;
    margin-top: 96px;
    font-size: 2rem;
}

/* モバイル対応（画面幅768px以下の場合） */
@media (max-width: 768px) {
    #company-profile h2{
        font-size: 1.5rem; /* フォントサイズを小さく */
        margin-bottom: 30px; /* 必要に応じてマージンも調整 */
    }
}


/* フッター */
footer{
    background-color : #000062;
    color : #ffffff;
    text-align: center;
    
    margin-top:0;
  height : 80px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;
}

.container{
  margin-top : 40px;
  margin-left : auto;
  margin-right : auto;
  margin-bottom : auto;
  width : 80%;
}

h1{
  font-weight : bold;
  color : white;
  background-color : #000082;
  padding-left : 10px;
  margin-top : 20px;
  overflow : auto;
}

h3{
  font-weight : bold;
  color : #565656;
  background-color : #ffffff;
  padding-left : 10px;
  margin-top : 20px;
  overflow : auto;
  border-left-width : 2px;
  border-bottom-width : 2px;
  border-left-style : solid;
  border-bottom-style : solid;
  border-left-color : #dd6f00;
  border-bottom-color : #cccccc;
}

h4{
  font-weight : bold;
  color : white;
  background-color : #606060;
  margin-top : 10px;
  overflow : auto;
  margin-left : 10px;
  margin-right : 10px;
  margin-bottom : 10px;
  padding-left : 15px;
}

.txt-box{
  padding-left : 5px;
  border-top-width : 10px;
  width : 90%;
  margin-left : 20px;
  padding-bottom : 10px;
}

.fom1{
  background-color : #f4f4f4;
  margin-top : 5px;
  margin-left : 5px;
  margin-right : 5px;
  margin-bottom : 5px;border-width : 1px;border-style : solid;border-color : #808080;
  padding-top : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 5px;
}

.fom2{
  background-color : white;
  padding-top : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 5px;
  margin-top : 5px;
  margin-left : 5px;
  margin-right : 5px;
  margin-bottom : 5px;border-width : 1px;border-style : solid;border-color : #408080;
}

a.box1{
  font-weight : bold;
  color : white;
  background-color : #000082;
  width : auto;
  height : auto;
  padding-top : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 5px;
  text-decoration : none;
}

a:hover.box1{
  font-weight : bold;
  color : black;
  background-color : orange;
  padding-top : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 5px;
  width : auto;
  height : auto;
  text-decoration : none;
}

a:active.box1{
  font-weight : bold;
  color : white;
  background-color : red;
  text-decoration : none;
  padding-top : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 5px;
  width : auto;
  height : auto;
}

a.box10{
  font-weight : bold;
  color : white;
  background-color : #000082;
  width : 200px;
  padding-top : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 5px;
  text-decoration : none;
}

a:hover.box10{
  font-weight : bold;
  color : black;
  background-color : orange;
  padding-top : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 5px;
  width : 200px;
  text-decoration : none;
}

a:active.box10{
  font-weight : bold;
  color : white;
  background-color : red;
  text-decoration : none;
  padding-top : 5px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 5px;
  width : 200px;
}


input[type="text"]{
  min-width: 10ch;  /* ただし最小320pxは確保 */
  max-width: 90%;
  box-sizing: border-box; 
}

h2{
  color : white;
  background-color : #494949;
  font-size : 16pt;
  padding-left : 15px;
  font-weight : bold;
}

h3.top{
  font-weight : bold;
  color : white;
  background-color : #000082;
  padding-left : 10px;
  margin-top : 40px;
  overflow : auto;
}

table{
  border-collapse : collapse;
  border-width : 1px;
  border-color : gray;
  border-style : solid;
}

a.box2{
  text-decoration: none;
  width : 173px;
  margin : 2px;
  text-align : center;
  color : white;
  font-weight : bold;
  float : left;
  background-color : navy;
}

.link-box{
  margin-right : 2px;
  max-width : 760px;
  margin-top : 10px;
  clear : both;
  overflow : auto;
  /*background-position : 100% 100%;*/

  margin-left : 2px;
  margin-bottom : 2px;
  width : 100%;
}

.clear{
  clear : both;
  height : 2px;
}