@charset "UTF-8";

/* 共通部分 */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: "Sawarabi Gothic", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    line-height: 1.7;
    color: #1C1C1C;
    -webkit-tap-highlight-color: transparent;
}
main {
    /* background-color: aqua; */
}
a {
    text-decoration: none;
    color: #1c1c1c;
}
a :hover {
    opacity: 0.7;

}

img {
    max-width: 100%;
}
p {
    text-align: justify;
    font-size: 100%;
}


/* レイアウト */
.wrapper {
    width: 100%;
    max-width: 1120px;
    margin: auto;
    /* background-color: darksalmon; */
}
.align-center {
    text-align: center;
}
.flex { /* 親要素 */
    display: flex;
    flex-wrap: wrap;
}
.flex_02 { /* 親要素：水平垂直センター揃え */
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_03 { /* 親要素：水平垂直センター揃え */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inner {
    padding: 2rem 0;
}
.content-block {
    padding: 0 1rem;
    margin-bottom: 5rem;
    /* background-color: aqua; */
}
.flow-block {
    padding: 0 1rem;
    margin-bottom: 3rem;
}

/* margin */
.mt-8 {
    margin-top: 0.5rem;
}
.mt-16 {
    margin-top: 1rem;
}
.mt-20 {
    margin-top: 1.25rem;
}
.mt-32 {
    margin-top: 2rem;
}
.mt-40 {
    margin-top: 2.5rem;
}
.mb-8 {
    margin-bottom: 0.5rem;
}
.mb-16 {
    margin-bottom: 1rem;
}
.mb-20 {
    margin-bottom: 1.25rem;
}
.mb-32 {
    margin-bottom: 2rem;
}
.mb-40 {
    margin-bottom: 2.5rem;
}

/* 見出し */
.Category-ttl, 
.Page-ttl {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0.05rem;
    text-align: center;
}
.Category-ttl {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.Page-ttl {
    font-size: 1.5rem;
    margin: 0 1rem 2rem;
    padding: 1rem 1rem;
    border-top: 2px solid #1C1C1C;
    border-bottom: 2px solid #1C1C1C;
    /* background-color: aqua; */
}
.head-ttl_01,
.head-ttl_02,
.head-ttl_03 {
    font-size: 1.4rem;
    font-weight: normal;
    margin-bottom: 1rem;
}
.head-ttl_02 {
    border-bottom: 1px solid #1C1C1C;
}
.head-ttl_03 {
    padding: 0.1em 0.4em;
    background: #FFF3CB;
}
.head-ttl_04 {
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 1rem;
    padding-left:8px;
    border-left: solid 5px #F37900;
}

/* テキスト */
.txt_lead {
    margin-bottom: 2rem;
}
.txt01 {
    text-align: center;
}
.txt02 {
    text-align: center;
    margin-bottom: 3rem;
}
.small {
    font-size: 0.875rem;
}

/* 改行 */
.br-sp {
        display: block;
}
.br-pc {
        display: block;
}

/* 背景色 */
.bg_yellow {
    background-color: #FFF3CB;
}

/* ボタン */
.btn {
    width: 15rem;
    letter-spacing: 0.05rem
}
.btn_01,
.btn_02 {
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 1.2rem;
    border-width: 1px;
    border-radius: 4px;
    transition: 0.2s;
}
.btn_01 {
    color: #1c1c1c;
    border-width: 1px;
    border-style: solid;
}
.btn_01:hover {
    background-color: #FCCB2C;
}
.btn_02 {
    color: #fff;
    background-color: #F37900;
}
.btn_02:hover {
    background-color: #F35400;
}

/* 装飾 */
.orange {
    color: #F37900;
}
.red {
    color: #F00C0C;

}
.line_01 {
    border: 1px solid #ccc;
    margin: 1rem 0;
}
.under_01 {
    color: #1c1c1c;
    text-decoration: underline; 
    
}

/* リスト */
ol  {
    margin: 0;
    padding: 0
}

ol li {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    line-height: 1.5;
}
li span {
    padding-right: 2px;
}
.li-sub {
    font-size: 0.875rem;
    text-indent: -5em;
}
.li-orange ul,
.li-gray ul,
.li-basic ul {
    margin: 0 1.3rem 2rem;
}
.li-orange ul li::marker {
    color: #FCCB2C;
    font-size:1.3rem;
    line-height: 1;
}
.li-gray ul li::marker {
    color: #8F8F8F;
    font-size:1.3rem;
    line-height: 1;
}
.li-basic ul li::marker {
    color: #1c1c1c;
    line-height: 1;
}
.required::after {
    content: " ※";
    color: #F00C0C;
}

/* アンカー */
.ank-category ul {
    padding: 0 1rem;
    margin-bottom: 5rem;
}
.ank-category ul li {
    line-height: 4rem;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0 0 -1px; 
    list-style: none;
    padding: 0 20px;
    text-decoration: none;
    position: relative;
}
.ank-category ul li::after {
    content: '';
    display: block;
    width: 10px; /* 矢印の大きさの指定 */
    height: 10px; /* 矢印の大きさの指定 */
    transform: rotate(225deg);
    border-top: 3px solid #F37900; /* 矢印の太さの指定 */
    border-left: 3px solid #F37900; /* 矢印の太さの指定 */
}
.ank-category ul li a {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    box-sizing: border-box;
    text-decoration: none;
}
.arrow-down::after {
    position: absolute; /* 矢印の位置の指定 */
    right: 20px; /* 矢印の位置の指定 */
    top: 25px; /* 矢印の位置の指定 */
}

/*=============================
ヘッダー
=============================*/
.page-header {
    margin-bottom: 5rem;
}
/* ハンバーガー */
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 25px;
    border-radius: 3px;
    background-color: #1C1C1C;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}

/* ハンバーガー内メニュー */
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%; /*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: rgba(252, 203, 44, 0.96); /*メニューオープン時の背景色*/
    background-position: center;
    background-size: cover;
    transition: all 0s; /*アニメーション設定*/
    
}
.menu-content img {
    width: 200px;
    position: absolute;
    top: 30px;
    left: 30px;
}
.menu-content ul {
    padding: 80px 10px 0;
}
.menu-content ul li {
    text-align: center;
    line-height: 4rem;
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    box-sizing: border-box;
    color:#1C1C1C;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a:hover {
    background-color: #F4BB05;
}
#menu-btn-check:checked ~ .menu-content {
    left: 0; /*メニューを画面内へ*/
}

/*=============================
mv
=============================*/
.mv {
    text-align: center;  
    margin-bottom: 3rem;

}
.mv p {
    font-size: 90%;
}
.topimg {
    width: 11rem;
    margin-bottom: 19px;
}
.logo {
    width: 13rem;
    margin-bottom: 0.8rem;

}
.logo-sub {
    width: 12rem;
    margin-bottom: 1rem;
}
.dli-chevron-down {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
    color: #1c1c1c;
    line-height: 1;
    width: 1em;
    height: 1em;
    border: 1px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(-25%) rotate(135deg);
}

/*=============================
TOP
=============================*/
.grid {
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    margin-bottom: 3rem;
}
.grid-item img {
    aspect-ratio:1/1;
    object-fit: cover;
}
.grid-item .tag {
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
}
.grid-item .title {
    font-size: 0.95rem;
    line-height: 1.4rem;
}

/*=============================
works
=============================*/
.works .flex-item {
    width: 100%;
    padding: 0 2rem 1rem 2rem;
    }
.caption {
    margin: 1rem 0 3rem;
}
.tag {
    color: #8F8F8F;
    font-size: 0.875rem;
}
.Works-ttl {
    font-size: 2rem;
    line-height: normal;
    margin-bottom: 0.875rem;
}

/*=============================
service
=============================*/
.service .flex .flex-item {
    width: 180px;
    padding-right: 1rem;
    }
/*=============================
about
=============================*/
.timeline  {
  margin-bottom: 2rem;
}
.Prof-img {
    width: 60%;
    margin: 0 auto 2rem;
}
.Ja-name {
    font-size: 1.2rem; 
}
.En-name {
    font-size: 0.875rem;

}
.about .timeline .flex-item--l {
    width: 100%;
    padding-right: 16px;
}
.about .timeline .flex-item--r {
    width: 100%;
    margin-bottom: 0.5rem;
}

/*=============================
フッター
=============================*/
.page-footer {
    
}
.bg-footer {
    background-color: #FFF3CB;
    border-radius: 14px;
    margin: 0 2rem 2rem;
}
footer .container {
    margin-bottom: 2rem;
}
footer .icon {
    line-height:0;
    padding: 28px;
}
footer .icon:hover {
    opacity: 0.7;
}
.copyright {
    color: #1c1c1c;
    border-top: solid 1px #EEEEEE;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* TOPに戻るボタン */
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: #195A3A;
    border-radius: 50%;
    opacity: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.pagetop_arrow {
    height: 10px;
    width: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(20%) rotate(-45deg);
}



/*=============================
レスポンシブ
=============================*/
/* スマホ版 */
@media (max-width: 800px){ /* 800px以下の画面時に */
    .pc {
        display: none;
    }
    .br-pc {
        display: none;
    }
} 

/* デスクトップ版 */
@media (min-width: 800px){ /* 800px以上の画面時に */
    p {
        font-size: 100%;
    }
    .sp {
        display: none;
    }
    .page-header {
        margin: 2rem auto 4rem;
    }
    .pc-menu {
        padding: 0 5rem;
    }
    .pc-menu div {
        text-align: center;
    }
    .pc-menu a:hover {
        text-decoration: underline;
        text-decoration-thickness: 0.5em;
        text-decoration-color: #FCCB2C;
        text-underline-offset: -0.2em;
        text-decoration-skip-ink: none;
    }
    .br-sp {
        display: none;
    }
    .menu-btn {
        top: 20px;
        right: 40px;
    }
    .logo {
        width: 26rem;
    }
    .logo-sub {
        width: 14rem;
    }
    .works .flex-item {
        width: 50%;
        padding: 0 2rem 0;
    }
    .Works-ttl {
        font-size: 1.4rem;
    }
    .caption {
        margin: 2rem 0 3rem;
    }
    .grid {
        gap: 3rem 2rem;
        grid-template-columns: repeat(4, 1fr);
    }
    .service .flex-item {
        width: 500px;
        padding-right: 1rem;
    }
    .about .timeline .flex-item--l {
        width: auto;
    }
    .about .timeline .flex-item--r {
        width: auto;
    }
    .Prof-img {
        width: 280px;
        margin-bottom: 0;
    }
    .bg-footer {
        margin: 0 5rem 2rem;
    }
}