@charset "utf-8";

/* basic */

:root{
    --v-space:clamp(90px,9vw,120px);
}

body{
  margin: 0;
  background-color: #eeeeee;  
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: #222222;
}

h1,h2,h3,h4,h5,h6,p,figure,ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

p{
    line-height: 1.8;
}

a{
    color: inherit;
    text-decoration: none;
}

a:hover{
    filter: brightness(90%) contrast(120%);
}

img{
    /*display: block;*/
    max-width: 100%;
    height: auto;
}

.skill{
    padding: 10px;
    border: 0.5px solid #b72661;
}

.skill-title{
    font-size: clamp(20px,2.86vw,22px);
    font-weight: bold;
    text-decoration:0.5px #b72661 wavy underline;
    display: block;
    padding-bottom: 5px;
}

/* 横幅と左右の余白 */
.w-container{
    width: min(92%,1166px);
    margin: auto;
    position: relative;
}

/* header */
.header{
    height: 112px;
    background: rgba(186,165,165,0.36);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.navbtn{
    padding: 0;
    outline:none;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #aaaaaa;
    font-size: 30px;
}

.open .navbtn{
    z-index: 110;
    color: #ffffff;
}

.navbtn .fa-bars {
    display: revert;
}

.open .navbtn .fa-bars{
    display: none;
}

.navbtn .fa-xmark{
    display: none;
}

.open .navbtn .fa-xmark{
    display: revert;
}

.agalogo{
    border-radius: 20px;
}

/* hero */
.hero{
    height: 650px;
    background-image: url(img/india_SP.jpg);
    background-position: center;
    background-size: cover;
}

.hero-container{
    display: grid;
    justify-items: center;
    align-content: center;
    height: 100%;
}

.hero h1{
    margin-bottom: 42px;
    font-size: clamp(48px,5vw,68px);
    min-height: 0vw;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
}

.hero p{
    margin-bottom: 72px;
    font-size: clamp(18px,5vw,38px);
    font-weight: 200;
    text-shadow:-4px -4px 6px #fff;
}

/* button */
.btn{
    display: block;
    width: 260px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #e8b368;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    text-shadow: 0 0 6px #00000052;
}

.btn:hover{
    border-radius: 70%;
}

/* 画像とテキスト */
.imgtext{
    padding: var(--v-space)0;
    background: rgba(186,165,165,0.36);
}

.imgtext-container{
    display: flex;
    flex-direction: column;
    gap:clamp(45px,6vw,80px);
}



/* タイトルとサブタイトル（赤色の短い線で装飾） */

.heading-decoration{
    font-size: clamp(30px, 3vw, 40px);
    min-height: 0vw;
    font-weight: 400;
}

.heading-decoration::after{
    display: block;
    content:'';
    width: 160px;
    height: 0px;
    border-top: solid 1px #b72661;
    margin-top: 0.6em;
}

.heading-decoration + p {
    margin-top: 1em;
    margin-bottom: 2em;
    color: #707070;
    font-size: 18px;
}

/* 記事一覧 */
.post a{
    display: block;
}

.post h3{
    margin: 1em 0 0.5em;
    font-size: clamp(12px,2vw,20px);
    min-height: 0vw;
}

.post p{
    max-width: 20em;
    font-size: clamp(10px,1.6vw,14px);
    min-height: 0vw;

}

#posts{
    padding: var(--v-space) 0;
    background-color: #EE9797;
}

#posts2{
    padding: var(--v-space) 0;
    background-color: #D6C37F;
}


.posts-container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:32px 25px;
}


/* パーツの見出し */
.heading{
    position:absolute;
    top:calc((var(--v-space) + 0.9em)*-1);
    font-size: clamp(40px,5.2vw,70px);
    min-height: 0vw;
    font-weight: 300;
}

.heading span{
    display: block;
    color: #666666;
    font-size: 30px;
}

/* landing page */

.dogfish{
    padding-top: 20px;
    font-size: clamp(16px, 2.4vw, 18px);
}

.dogfish :nth-child(2){
    padding-top: 40px;
}
.dogsite{
    font-size: clamp(16px, 2.4vw, 18px);
    width: 300px;
    height: 50px;
    padding-top: 12px;
    box-sizing: border-box;
    background:rgba(82,48,2,0.9);
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
}

.side-btn{
    font-size: clamp(14px, 1.82vw, 16px);
    width: 250px;
    height: 50px;
    padding: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #d4bc9a;
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
}

.side-btn:hover{
    background-color: #EE9797;
}

.desktop{
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
}

.desktopimg{
    width: 40%;
    height: 40%;
    margin-bottom: 100px;
}

.spimg{
    width: 20%;
    height: 20%;
}


/* footer */
.footer{
    padding: 70px 0;
    background: rgba(186,165,165,0.36);
    color: #707070;
    font-size: 13px;
}

.footer-container{
    display: grid;
    gap:50px;
    justify-items: center;
}

.footer-sns{
    display: flex;
    gap:24px;
    font-size: 24px;
}

.footer-sns a{
    display: grid;
    place-items: center;
    width: 36px;
    aspect-ratio: 1 / 1;
    background-color: #cccccc;
    color: #ffffff;
    clip-path: circle(50%); 
}

.footer-menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* 記事 */

.entry{
    padding-bottom: var(--v-space);
    background: rgba(186,165,165,0.36);
}

.entry-img img{
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    margin-bottom: calc(var(--v-space) * 2 / 3);
}

.entry .w-container{
    max-width: 720px;
}

.entry .heading-decoration{
    font-size: clamp(30px, 6.25vw, 48px);
}

.entry-container{
    font-size: clamp(16px, 2.4vw, 18px);
}

.entry-container
:where(h1,h2,h3,h4,h5,h6,figure,ul){
    margin-top: revert;
    margin-bottom: revert;
    padding: revert;
    list-style: none;
}

 
 .entry-container > :first-child{
    margin-top: 0;
 }

 .entry-container > :last-child{
    margin-bottom: 0;
    margin-top: 15px;
 }
 
 .entry-title{
    margin-top: revert;
    margin-bottom: revert;
    font-size: clamp(20px, 2.86vw, 22px);
    text-decoration: underline wavy  #b72661;
 }



 
    

@supports not (aspect-ratio: 1 / 1){
    .footer-sns a{
        height: 36px;
    }
}


/* PCサイト表示 */

@media(min-width: 768px){
    .navbtn{
        display: none;
    }

    .nav ul{
        display: flex;
        gap:40px;
        color: #707070;
    }


    .imgtext-container{
        flex-direction: row;
        align-items: center;
        }
    
    .imgtext-container > .text{
        flex: 2;
        min-width: 17em;
    }
    
    .imgtext-container >.img{
        flex: 1;
    }

    .posts-container{
        grid-template-columns: repeat(3,1fr);
    }
    
    .footer-container{
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        gap: 20px;
    }

    .footer-container > .footer-site{
        margin-bottom: 20px;
    }

    .footer-container > *:not(.footer-sns){
        justify-self: start;
    }

    .footer-container > .footer-sns {
        grid-column: 2;
        grid-row: 1 / 4;
        justify-self: end;
        align-self: center;
    }
}

/* モバイルオンリー */
@media(max-width:767px) {
    .nav{
        position: fixed;
        inset:0 -100% 0 100%;
        z-index: 100;
        background-color: #4e483ae6;                     
        transition:transform 0.3s;
    }

    .open .nav{
        transform: translate(-100%, 0);
    }

    .open body{
        position: fixed;
        overflow: hidden;
    }

    .nav ul{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 40px;
        color: #ffffff;
    }

}



/* contact */

.contact-form{
margin-top:20px ;    
box-sizing: border-box;
border: 1px solid #aaa;
padding: 50px 30px;
}

.title {
    text-align: center;
    font-size: clamp(20px,2.86vw,22px);
    color: #666666;
    padding-bottom: 70px;
}

.form{
    width: 460px;
    margin: 0 auto;
}

.item{
    overflow: hidden;
    margin-bottom: 20px;
}

.label{
    margin-right: 20px;
    width: 135px;
    border-left: 1px solid #b72661;
    padding-left: 10px;
}

.inputs{
    float: right;
    width: 300px;
}

input[type="text"],
input[type="email"]{
    border: solid  0.5px #aaa;
    padding: 10px;
    font-size: 15px;
    border-radius: 5px;
}

textarea{
    border:solid 0.5px #aaa;
    border-radius: 5px;
    padding: 10px;
    height:160px;
    width: 300px;
    font-size: 15px;
}

.button-area{
    text-align: center;
    padding-left: 150px;
}

input[type="submit"]{
    background-color: #666666;
    border: none;
    padding: 10px 20px;
    color: #fff;
    border-radius: 10px;
    font-size: 17px;
    margin: 0 5px;
    box-shadow: 1px 1px 3px black;
    cursor: pointer;

}
input[type="reset"]{
    background-color: #aaa;
    border: none;
    padding: 10px 20px;
    color: #fff;
    border-radius: 10px;
    font-size: 17px;
    margin: 0 5px;
    box-shadow: 1px 1px 3px black;
    cursor: pointer;

}

.free{
    /*font-weight: bold;*/
    color: #aa783e;
}