/* ============================================
   ベーススタイル
   ============================================ */
body{
    font-family: 'Zen Kaku Gothic New', sans-serif;
    background-color:#093160;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* コンテナの最大幅設定 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
}

/* スムーズスクロール */
html {
    scroll-behavior: smooth;
}
.contents-section0{
    width:100%;
    height:75vh;
    min-width:300px;
    min-height:240px;
    max-height:900px;
    display:grid;
    place-items: center;
}
.align-left{
    width:100%;
    text-align:left;
}
.align-center{
    text-align:center;
}
.width100{
    width:100%;
}
.width80{
    width:80%;
    margin:0 auto;
}
.width90{
    width:90%;
    margin:0 auto;
}
.margintop-100{
    margin-top:clamp(25px, 7vh, 100px);
}
.margintop-80{
    margin-top:clamp(20px, 6vh, 80px);
}
.margintop-50{
    margin-top:clamp(13px, 3.3vh, 30px);
}
.marginbottom-50{
    margin-bottom:clamp(10px, 3.3vh, 30px);
}
.margintop-30{
    margin-top:clamp(6px, 1.9vh, 20px);
}
.line-height-150{
    line-height:150%;
}
.line-height-200{
    line-height:200%;
}
.line-height-250{
    line-height:250%;
}
/*top*/
.contents-section{
    min-height:80vh;
    padding:clamp(20px, 5vh, 150px) clamp(10px, 4vw, 40px);
    display:grid;
    place-items: center;
}
.top-box{
    width:clamp(280px, 75vw, 440px);
    height:clamp(280px, 75vw, 440px);
    max-width: 440px;
    max-height: 440px;
    aspect-ratio:1;
    background-image: 
        linear-gradient(00deg, white,white),
        linear-gradient(00deg, white,white),
        linear-gradient(00deg, white,white),
        linear-gradient(00deg, white,white);
    background-repeat: no-repeat;
    background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
    background-position: 
        left bottom, left top, right top, right bottom;
    animation: square_anim 1.0s linear forwards;
    will-change: background-size;
}
.top-box .logo{
    width:52%;
    height:auto;
}
@keyframes square_anim{
    00%{
      background-size: 
        1px 0, 0 1px,
        1px 0, 0 1px; 
    }
    50%{
      background-size: 
        1px 100%, 0 1px,
        1px 0, 100% 1px;
    }
    100%{
      background-size: 
        1px 100%, 100% 1px,
        1px 100%, 100% 1px;
    }
}
.think{
    width:50%;
    height:auto;
    margin:4% 0;
}
.thinking{
    width:48%;
    height:auto;
}
/*mission*/
.contents-section2{
    min-height:60vh;
    padding:clamp(30px, 5vh, 60px) clamp(20px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#mission{
    color:#093160;
    background-color:white;
}
#mission h1{
    font-size:clamp(16px, 3.6vw, 22px);
    font-weight:700;
    margin-bottom:clamp(40px, 13vh, 200px);
    letter-spacing: 0.05em;
}
#mission h2{
    font-size:clamp(24px, 4.2vw, 36px);
    font-weight:700;
    margin-bottom:clamp(20px, 6.4vh, 32px);
    letter-spacing: 0.02em;
    line-height: 1.4;
}
#mission h3{
    font-size:clamp(16px, 2.4vw, 28px);
    font-weight:400;
    line-height: 1.8;
}
.pink-marker{
    background-color: pink;
    padding:0 clamp(3px, 0.4vw,5px);
}
/*skill*/
#skill{
    background-color:#104c79;
}
.skill-space{
    background-color:white;
    width:100%;
    height:clamp(20px, 8vh, 90px);
}
.skill-wrapper{
    position:relative;
}
.skill-box{
    position:relative;
    width:fit-content;
    max-width: 1200px;
    height:auto;
    padding:clamp(50px, 6.5vw, 100px) clamp(20px, 4vw, 60px);
    margin:0 auto;
    z-index: 10;
}
.skill-title{
    width:100%;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.skill-title .logo{
    width:clamp(160px, 20vw, 270px);
    height:auto;
    margin-right:4px;
}
.skill-title p{
   color:white;
   font-size:clamp(18px, 2.4vw, 26px);
   font-weight:300;
   padding-top:clamp(6px, 1%, 8px);
}
.skill-box dl{
    color:white;
    font-size:clamp(20px, 3.0vw, 33px);
    font-weight:300;
    margin-top:clamp(32px, 1.6vh, 64px);
    line-height: 1.6;
}
.skill-box dl dt{
    width:100%;
    margin-top:clamp(20px, 3.1vw, 75px);
    font-size:77%;
    margin-bottom:clamp(8px, 1.0vh, 25px);
    display:flex;
    align-items: center;
    font-weight: 500;
}
.potsu{
    width:clamp(13px ,1.5vw, 18px);
    margin-right:10px;
}
.skill-box dl dd{
    font-size:70%;
    padding-left:clamp(1rem, 1.5vw, 1.5rem);
    line-height:1.6;
    margin-bottom: 0.3em;
}
.skill-triangle{
    position:absolute;
    top:0;
    right:0;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    background-color: #093160;
    mix-blend-mode: multiply;
    width:clamp(50%, 60vw, 60%);
    height:100%;
    min-height: 200px;
}
.skill-triangle-border{
    margin:0 0 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 530px 530px;
    border-color: transparent transparent #093160 transparent;
    mix-blend-mode: multiply;
}
/*ABOUT*/
#about{
    background-color:#ecf3f7;
    padding:clamp(50px, 6.5vw, 100px) clamp(20px, 4vw, 60px);
}
.about-wrapper{
    width:fit-content;
    max-width: 1200px;
    height:100%;
    text-align:left;
    font-size:clamp(20px, 3.0vw, 33px);
    margin: 0 auto;
}
.about-wrapper p{
    font-size:70%;
}
.about-logo{
    width:clamp(75px, 10vw, 180px);
    height:auto;
}
.about-think{
    margin:clamp(30px, 4vh, 50px) 0 5px 0; 
    font-size:74%;
    font-weight:700;
    color:#093160;
    letter-spacing: 0.05em;
}
.margin-top30px{
    margin-top:30px;
}
.about-txt{
    color:#093160;
    line-height:1.8;
    margin-bottom: 0.2em;
}
.contact-logo-box{
    margin-top:30px;
}
.contact-logo{
    width:clamp(175px, 21.8%, 21.8%);
}
/*footer*/
.footer1{
    width:100%;
    color:white;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    padding:clamp(20px, 3vh, 30px) clamp(20px, 4vw, 60px);
    gap: 20px;
}
.footer1 p{
    margin:10px 0;
}
.footer-think{
    font-size:clamp(18px, 2.38vw, 40px);
    font-weight:700;
    width:auto;
    min-width: 200px;
    flex: 1;
}
.footer-policy{
    font-size:clamp(12px, 1.5vw, 20px);
    font-weight:300;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
}
.footer-policy span{
    display: inline-block;
    width:clamp(1.5rem, 2.5vw, 2.5rem);
}
.footer2{
    width:100%;
    padding:clamp(15px, 2.5vh, 20px) clamp(20px, 4vw, 60px);
    background-color:white;
}
.copy-think{
    font-size:clamp(14px, 2.0vw, 56px);
    font-weight:700;
    width:100%;
    text-align:right;
    letter-spacing: 0.02em;
}
/*common*/
.basictext{
    margin-top:30px;
    color:white;
    font-size:128px;
    font-weight:900;
}
.flxbox{
    display:flex;
}
.flx-clm{
    flex-direction:column;
}
.flx-allcenter{
    justify-content: center;
    align-items: center;
    align-content: center;
}
.bgcolor-white{
    background-color:white;
}

/* ============================================
   メディアクエリ - レスポンシブデザイン
   ============================================ */

/* モバイル（最大480px） */
@media screen and (max-width: 480px) {
    .contents-section {
        min-height: 70vh;
        padding: clamp(15px, 4vh, 30px) 15px;
    }
    
    .top-box {
        width: clamp(250px, 85vw, 320px);
        height: clamp(250px, 85vw, 320px);
    }
    
    #mission h1 {
        margin-bottom: clamp(30px, 8vh, 60px);
    }
    
    #mission h2 {
        font-size: clamp(20px, 5vw, 28px);
    }
    
    #mission h3 {
        font-size: clamp(14px, 3.5vw, 20px);
        line-height: 1.7;
    }
    
    .skill-box {
        padding: clamp(40px, 5vh, 60px) 15px;
    }
    
    .skill-title .logo {
        width: clamp(140px, 50vw, 200px);
    }
    
    .skill-box dl {
        font-size: clamp(18px, 4vw, 24px);
    }
    
    .skill-triangle {
        width: 70%;
    }
    
    #about {
        padding: clamp(40px, 5vh, 60px) 15px;
    }
    
    .about-wrapper {
        font-size: clamp(18px, 4vw, 24px);
    }
    
    .footer1 {
        flex-direction: column;
        align-items: center;
        padding: 20px 15px;
        gap: 4px;
    }

    .footer1 p {
        margin: 0;
    }

    .footer-think {
        width: 100%;
        text-align: center;
    }

    .footer-policy {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    
    .footer-policy span {
        display: none;
    }
}

/* タブレット（481px - 768px） */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .contents-section {
        min-height: 75vh;
        padding: clamp(20px, 5vh, 80px) 30px;
    }
    
    .top-box {
        width: clamp(300px, 70vw, 380px);
        height: clamp(300px, 70vw, 380px);
    }
    
    #mission {
        padding: clamp(40px, 6vh, 80px) 30px;
    }
    
    #mission h2 {
        font-size: clamp(26px, 4.5vw, 32px);
    }
    
    .skill-box {
        padding: clamp(50px, 7vh, 80px) 30px;
    }
    
    .skill-triangle {
        width: 55%;
    }
    
    #about {
        padding: clamp(50px, 7vh, 80px) 30px;
    }
    
    .footer1 {
        padding: 25px 30px;
    }
}

/* タブレット横向き・小型デスクトップ（769px - 1024px） */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .contents-section {
        padding: clamp(30px, 5vh, 120px) 40px;
    }
    
    .top-box {
        width: clamp(350px, 65vw, 400px);
        height: clamp(350px, 65vw, 400px);
    }
    
    #mission {
        padding: clamp(50px, 7vh, 100px) 50px;
    }
    
    .skill-box {
        padding: clamp(60px, 8vh, 90px) 50px;
    }
    
    #about {
        padding: clamp(60px, 8vh, 90px) 50px;
    }
}

/* 大型デスクトップ（1025px以上） */
@media screen and (min-width: 1025px) {
    .contents-section {
        padding: clamp(50px, 5vh, 150px) 60px;
    }
    
    #mission {
        padding: clamp(60px, 8vh, 120px) 60px;
    }
    
    .skill-box {
        padding: clamp(80px, 8vh, 100px) 60px;
    }
    
    #about {
        padding: clamp(80px, 8vh, 100px) 60px;
    }
    
    .footer1 {
        padding: 30px 60px;
    }
    
    .footer2 {
        padding: 20px 60px;
    }
}

/* 超大型画面（1400px以上） */
@media screen and (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .skill-box,
    .about-wrapper {
        max-width: 1400px;
    }
}

/* 高解像度ディスプレイ対応 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
    .top-box,
    .logo,
    .think,
    .thinking,
    .about-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 横画面モバイル最適化 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .contents-section {
        min-height: 100vh;
        padding: 20px;
    }
    
    .top-box {
        width: clamp(200px, 40vh, 300px);
        height: clamp(200px, 40vh, 300px);
    }
    
    #mission {
        min-height: auto;
        padding: 30px 20px;
    }
    
    #mission h1 {
        margin-bottom: 20px;
    }
}

/* タッチデバイス最適化 */
@media (hover: none) and (pointer: coarse) {
    .footer-policy a {
        padding: 5px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* タッチターゲットの最小サイズ確保 */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* プリントスタイル */
@media print {
    body {
        background-color: white;
    }
    
    .contents-section,
    #mission,
    #skill,
    #about {
        page-break-inside: avoid;
    }
}