@charset "UTF-8";
@font-face {
    font-family:'DM Serif Display';
    src: url(/public/fonts/DMSerifDisplay-Regular.ttf);
}
@font-face {
    font-family:'Noto Sans Japanese';
    src: url(/public/fonts/NotoSansJP-Medium.ttf);
}
@font-face {
    font-family:'Arial';
    src: url(/public/fonts/Arialn.ttf);
}
@font-face {
    font-family:'Montserrat';
    src: url(/public/fonts/Montserrat-Medium.otf);
}



/*******************************************************************************************
共通処理
*******************************************************************************************/
html {
    font-size: 100%;
    scroll-snap-type:y proximity;/*ページ内リンク少し上に着地調整*/
    scroll-padding-top:10vh;/*ページ内リンク少し上に着地調整*/
    /*scroll-behavior:smooth;/*上に戻る挙動をスムーズ化　　問い合わせフォームの画面外のフォームエラーが表示されなくなる影響あり*/
    scroll-behavior:auto;/*上に戻る挙動をスムーズ化　　問い合わせフォームの画面外のフォームエラーが表示されなくなる影響あり*/
}
body {
    background-color:white;
    font-family:'Montserrat', 'Noto Sans Japanese', 'DM Serif Display', serif;
    font-size: 0.9rem;
    line-height: 1.7;
}
/*画面幅が600px以下の場合*/
/*@media screen and (max-width: 600px) {
    body {
        font-size: 0.5rem;
    }
}
/*画面幅900px以上の場合*/
/*@media screen and (min-width: 900px) {
    body {
        font-size: 0.3rem;
    }
}
*/
/*中身のコンテンツ幅指定の共通クラス*/
.wrapper {
    width:calc(100% - 10%);
    max-width:100%;
    margin: 0 5%;
    padding:0;
    text-align: center;
    position:relative;

}
/*H2*/
h2{
    font-size:1.6rem;
}
/*共通ボタン*/
.btn_area{
    display:block;
    width:100%;
    height:auto;
    text-align:center;
}
.btn_area .btn{
    display:inline-block;
    width:300px;
    height:auto;
    padding:10px 30px;
    color:white;
    text-align:center;
    background-color:#ED6B1A;
    border-radius:50px;
    box-shadow: 0 0 8px gray;
    transition:0.3s;
}
.btn_area .btn:hover{
    background-color:#3e99db;
}


/*新着記事に「NEW」を付与*/
.text_icon{
    color:white;
    font-weight:bold;
    background-color:red;
    border-radius:30px;
    padding:3px 10px;
    margin-left:10px;
}
/*ＰＣ用の改行*/
br.br_pc{
    display:block;
}
/*スマホ用の改行*/
br.br_sm{
    display:none;
}
/*******************************************************************************************
変数定義
*******************************************************************************************/
body{
    /*テーマカラー*/
    --themecolor: rgb(97,31,16,1.0);
    /*ヘッダーの透過用カラー*/
    --themeheadcolor: rgb(97,31,16,0.4);
    /*メインフォントカラー*/
    --fontcolor:rgb(38,38,38,1);
}
/*******************************************************************************************
header
*******************************************************************************************/
#header {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    background-color:white;
    transition-duration:0.5s;
    z-index:20;
}
#header #header_menu_area .wrapper #header_menu{
    display:flex;
    width:100%;
    height:auto;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-top:10px;
    margin-bottom:10px;
}
#header #header_menu_area .wrapper #header_menu h1{
    display:none;
    width:100px;
    height:auto;
}
#header #header_menu_area .wrapper #header_menu h1 a.header_menu_title{
    display:block;
    width:100%;
    height:auto;
}
#header #header_menu_area .wrapper #header_menu h1 a.header_menu_title img{
    display:block;
}
#header #header_menu_area .wrapper #header_menu #nav{
    display:block;
    width:100%;
    height:auto;
}
#header #header_menu_area .wrapper #header_menu #nav ul#nav_menu{
    display:flex;
    width:100%;
    height:auto;
    justify-content:center;
    align-items:stretch;
}
#header #header_menu_area .wrapper #header_menu #nav ul#nav_menu li.nav_menu_item{
    display:block;
    width:calc(100% / 7);
    height:auto;
    border-left:1px solid rgb(38,38,38,0.3);
}
#header #header_menu_area .wrapper #header_menu #nav ul#nav_menu li.nav_menu_item a.btn{
    display:flex;
    width:100%;
    height:100%;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    font-size:max(1vw, 0.6rem);
}
#header #header_menu_area .wrapper #header_menu #nav ul#nav_menu li.nav_menu_item a.btn .icon_area{
    display:block;
    width:30px;
    height:auto;
}
#header #header_menu_area .wrapper #header_menu #nav ul#nav_menu li.nav_menu_item a.btn .logo_area{
    display:block;
    width:70%;
    height:auto;
}
#header #header_menu_area .wrapper #header_menu #nav ul#nav_menu li.nav_menu_item a.btn .logo_area img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
/*スマホスライドメニュー*/
#header #header_slide_menu_area{
    display:none;
}
/*******************************************************************************************
mask_area
*******************************************************************************************/
#mask_area{
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background-color:rgb(51,51,51,0.5);
    z-index:99;
}
#mask_area.active{
    display:block;
}
/*******************************************************************************************
mainvisual_slide（スライドショー用）
*******************************************************************************************/
#mainvisual_slide{
    position:relative;
    width:100%;
    background-color:#f9f9f9;
}
#mainvisual_slide .mainvisual_area{
    width:80%;
    max-width:90%;
    margin:0 auto;
    padding:30px 0;
}
/*******************************************************************************************
コンテンツスライド　セクション
*******************************************************************************************/
#contents_slider{
    background-color:#efefef;
    padding:30px 10px;
}
#contents_slider .contents_slider_nav .contents_item{
    margin-right:10px;
}


/*******************************************************************************************
サービス　セクション
*******************************************************************************************/
#service{
    padding-top:200px;
    padding-bottom:100px;
}
#service .inner h2{
    display:block;
    width:100%;
    height:auto;
    margin-bottom:70px;
}
#service .inner .list{
    display:flex;
    justify-content:space-between;
}
#service .inner .list .item{
    display:flex;
    width:calc(100% / 5);
    height:150px;
    margin:0 1%;
    border-radius:30px;
    position:relative;
}
#service .inner .list .item:nth-of-type(1){
    background-color:rgb(229,178,62);
}
#service .inner .list .item:nth-of-type(2){
    background-color:rgb(232,94,33);
}
#service .inner .list .item:nth-of-type(3){
    background-color:rgb(239,121,139);
}
#service .inner .list .item:nth-of-type(4){
    background-color:rgb(62,153,219);
}
#service .inner .list .item:nth-of-type(5){
    background-color:rgb(101,183,49);
    margin-right:0;
}
#service .inner .list .item .link{
    display:flex;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:end;
}
#service .inner .list .item .link img{
    display:block;
    width:150px;
    height:auto;
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%, -20%);
}
#service .inner .list .item .link:hover img{
    /*バウンド　アニメーション*/
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center bottom;
}
#service .inner .list .item .link h3{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:30%;
    padding:5px;
    font-size:max(1vw, 0.6rem);
    color:white;
    background-color:rgb(0,0,0,0.3);
    border-radius:0 0 30px 30px;
    position:relative;
}
#service .inner .list .item .link h3::after{
    content:"";
    display:block;
    width:10px;
    height:15px;
    background-image:url(/public/img/angle-right-solid-white.svg);
    position:absolute;
    top:50%;
    right:0;
    transform:translate(-100% , -50%)
}
#service .inner .comment_area{
    display:block;
    width:100%;
    height:auto;
    font-size:1.2rem;
    padding:40px 0;
}

/*******************************************************************************************
ポートフォリオ
*******************************************************************************************/
#portfolio{
    display:block;
    width:100%;
    height:auto;
    background-color:rgb(0,0,0);
}
#portfolio .inner{
    padding-bottom:100px;
}
#portfolio .inner h2{
    font-weight:bold;
    color:rgb(237,202,37);
    text-align:center;
    padding-top:100px;
    padding-bottom:50px;
    letter-spacing:0.8rem;
}
#portfolio .inner h2 strong{
    display:block;
    color:white;
    font-size:1.4rem;
}
#portfolio .inner .portfolio_slider_nav .portfolio_item{
    margin-right:10px;
}
#portfolio .inner .btn_area{
    margin-top:50px;
}
/*******************************************************************************************
ポートフォリオ２
*******************************************************************************************/
#portfolio_second{
    display:block;
    width:100%;
    height:auto;
    background-color:rgb(249,249,249);
    padding-top:50px;
    padding-bottom:50px;
}
#portfolio_second .inner{
    display:block;
    width:100%;
    height:auto;
}
#portfolio_second .inner ul{
    display:flex;
    width:100%;
    height:auto;
    justify-content:space-between;
}
#portfolio_second .inner ul .item_box{
    width:calc(100% / 3);
    margin-right:5%;
}
#portfolio_second .inner ul .item_box.right_area{
    margin-right:0;
}
#portfolio_second .inner ul .item_box li.item{
    display:block;
    width:100%;
    height:auto;
    margin-bottom:30px;
}
#portfolio_second .inner ul .item_box.center_area li.item:nth-of-type(1){
    height:300px;
}
#portfolio_second .inner ul .item_box.right_area li.item:nth-of-type(1){
    height:500px;
}
#portfolio_second .inner ul .item_box li.item a.link{
    display:block;
    width:100%;
    height:100%;
    background-color:white;
    border-radius:10px;
    overflow:hidden;
    transition:0.3s;
}
#portfolio_second .inner ul .item_box li.item a.link:hover{
    box-shadow:0px 0px 10px #353535;
}
#portfolio_second .inner ul .item_box li.item a.link dl{
    display:block;
    width:100%;
    height:100%;
}
#portfolio_second .inner ul .item_box li.item a.link dl dt{
    display:block;
    width:100%;
    height:70%;
}
#portfolio_second .inner ul .item_box li.item a.link dl dt img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
#portfolio_second .inner ul .item_box li.item a.link dl dd{
    text-align:left;
    padding:5%;
}
#portfolio_second .inner ul .item_box li.item a.link dl dd h2{
    font-size:1.3rem;
}
#portfolio_second .inner ul .item_box li.item a.link dl dd p.date{
    display:inline-block;
    color:#a6a3a3;
}
#portfolio_second .inner ul .item_box li.item a.link dl dd p.category{
    display:inline-block;
    color:#a6a3a3;
}
/*******************************************************************************************
contact
*******************************************************************************************/
#contact_container #contact_main{
    padding-top:50px;
    margin:0 20%;
}
#contact_container #contact_main h2{
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align:center;
    margin:100px auto 50px auto;
    position: relative;
}
#contact_container #contact_main h2 span.h2_ber{
    display:block;
    width:50px;
    height:1px;
    background-color:var(--fontcolor);
    margin:10% auto 0 auto;
}
#contact_container #contact_main p.explanation{
    display:inline-block;
    width:fit-content;
    font-size:0.8rem;
    text-align:left;
    margin:0 auto;
}
#contact_container #contact_main form{
    margin-top:50px;
    margin-bottom:100px;
}
#contact_container #contact_main form .input_item label{
    display:block;
    width:100%;
    height:auto;
    font-size:0.8rem;
    text-align:left;
    margin-bottom:10px;
}
#contact_container #contact_main form .input_item label span.required{
    display:inline-block;
    width:auto;
    color:#d7003a;
    background-color:rgb(238,187,185);
    border-radius:5px;
    padding:0 5px;
    margin-left:10px;
}
#contact_container #contact_main form .input_item .sex_list{
    display:block;
    width:100%;
    background-color:white;
    border:1px solid var(--themecolor);
    border-radius:5px;
    margin-bottom:20px;
}
#contact_container #contact_main form .input_item .sex_list .sex_item{
    display:flex;
    align-items:center;
    margin:10px;
}
#contact_container #contact_main form .input_item .sex_list .sex_item p.text{
    color:var(--fontcolor);
    white-space:nowrap;
    margin-left:10px;
}
#contact_container #contact_main form .input_item .sex_list .sex_item input{
    display:inline-block;
    width:auto;
    background-color:white;
    border:1px solid var(--themecolor);
    padding:3px 10px;
    appearance: revert;/*ラジオボタンのチェックボタン表示に必要*/
    vertical-align:middle;
    margin-left:10%;
    margin-bottom:0;
}
#contact_container #contact_main form .input_item input{
    display:block;
    width:100%;
    height:auto;
    background-color:#eee;
    text-align:left;
    padding:5px;
    margin-bottom:20px;
}
#contact_container #contact_main form .input_item input::placeholder{
    font-size:0.8rem;
    color:rgb(38,38,38,0.5);
}
#contact_container #contact_main form .input_item select{
    display:block;
    width:100%;
    text-align:center;
    background-color:#eee;
    padding:5px;
    margin-bottom:20px;
}
#contact_container #contact_main form .input_item select option{
    color:var(--fontcolor);
}
#contact_container #contact_main form .input_item textarea{
    display:block;
    width:100%;
    background-color:#eee;
    padding:5px;
    text-align:left;
}
#contact_container #contact_main form .input_item textarea::placeholder{
    font-size:0.8rem;
    color:rgb(38,38,38,0.5);
}
#contact_container #contact_main form button.submit{
    color:white;
    background-color: var(--fontcolor);
    border:1px solid var(--fontcolor);
    border-radius:5px;
    margin-top:50px;
    padding:10px 30px;
    cursor:pointer;
    transition:0.3s;
}
#contact_container #contact_main form button.submit:hover{
    color: var(--fontcolor);
    background-color:white;
}
/*******************************************************************************************
cofirm.php
*******************************************************************************************/
#cofirm_container #cofirm_main{
    text-align:center;
    margin:50px 20% 0 20%;
}
#cofirm_container #cofirm_main h2{
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin: 100px auto 50px auto;
    position: relative;
}
#cofirm_container #cofirm_main h2 span.h2_ber{
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--fontcolor);
    margin: 10% auto 0 auto;
}
#cofirm_container #cofirm_main p.comment{
    color:var(--fontcolor);
    font-size:0.8rem;
}
#cofirm_container #cofirm_main table{
    display:block;
    width:100%;
    margin-top:50px;
    margin-bottom:50px;
    background-color:#eee;
}
#cofirm_container #cofirm_main table tbody tr{
    display:flex;
    width:100%;
}
#cofirm_container #cofirm_main table tbody{
    display:block;
    width:100%;
}
#cofirm_container #cofirm_main table tbody tr th{
    display:inline-block;
    width:30%;
    font-size:0.9rem;
    color:var(--fontcolor);
    text-align:left;
    padding:10px 10px;
}
#cofirm_container #cofirm_main table tbody tr td{
    display:inline-block;
    width:70%;
    font-size:0.9rem;
    color:var(--fontcolor);
    text-align:left;
    padding:10px 10px;
}
#cofirm_container #cofirm_main form input.submit_btn{
    color:white;
    background-color: var(--fontcolor);
    border:1px solid var(--fontcolor);
    border-radius:5px;
    margin-top:50px;
    margin-right:20px;
    padding:10px 30px;
    cursor:pointer;
    transition:0.3s;
}
#cofirm_container #cofirm_main form input.submit_btn:hover{
    color:var(--fontcolor);
    background-color:white;
}
#cofirm_container #cofirm_main form button.return_btn{
    color:var(--fontcolor);
    background-color:white;
    border:1px solid var(--fontcolor);
    border-radius:5px;
    margin-top:50px;
    padding:10px 30px;
    cursor:pointer;
}
/*******************************************************************************************
send.php
*******************************************************************************************/
#send_container{
    padding-bottom:100px;
}
#send_container #send_main{
    margin-top:70px;
}
#send_container #send_main h2{
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin: 100px auto 50px auto;
    position: relative;
}
#send_container #send_main h2 span.h2_ber{
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--fontcolor);
    margin: 10% auto 0 auto;
}
#send_container #send_main p.text_area{
    color:var(--fontcolor);
    font-size:0.8rem;
}
#send_container #send_main a.return_btn{
    display:inline-block;
    color:white;
    background-color:var(--fontcolor);
    border:1px solid var(--fontcolor);
    border-radius:5px;
    margin-top:150px;
    padding:10px 30px;
    cursor:pointer;
    transition:0.3s;
}
#send_container #send_main a.return_btn:hover{
    color:var(--fontcolor);
    background-color:white;
}
/*******************************************************************************************
footer トップへ戻るボタン    
*******************************************************************************************/
#footer{
    position:relative;
}
#footer #return_top_btn {
    right: 1rem;
    width:3.5rem;
    height:3.5rem;
    z-index:99;/*ハンバーガーメニュー表示中は後ろに隠す*/
    scroll-behavior:smooth;
}
/*******************************************************************************************
フッター
*******************************************************************************************/
#footer{
    padding-top:30px;
}

#footer #contact_area{
    display:block;
    width:150px;
    height:150px;
    position:fixed;
    bottom:0;
    right:0;
    z-index:20;
}
#footer_menu a.footer_logo{
    display:block;
    width:100px;
    height:auto;
}
#footer_menu #footer_menu_area{
    margin-bottom:30px;
}
#footer_menu #footer_menu_area ul#footer_menu_lists{
    display:flex;
    justify-content:center;
}
#footer_menu #footer_menu_area ul#footer_menu_lists li.footer_menu_item{
    text-align:center;
    padding:0.2% 2%;
    border-right:1px solid var(--fontcolor);
}
#footer_menu #footer_menu_area ul#footer_menu_lists li.footer_menu_item:last-child{
    border-right:none;
}
/*******************************************************************************************
copyright
*******************************************************************************************/
#copyright{
    display:block;
    width:100%;
    height:auto;
    background-color:#ED6B1A;
    text-align:center;
}
#copyright .logo_area{
    display:block;
    width:150px;
    height:auto;
    margin:0 auto;
}
#copyright .copyright_area p{
    color:white;
    font-size:0.8rem;
}
#copyright .webdesign_area p{
    color:white;
    font-size:0.7rem;
}
/*******************************************************************************************
アニメーション（共通）
*******************************************************************************************/
/*
アニメーション（スクロール時、右下にフェードイン）
フェードイン前の初期ポジションを指定用？
*/
.anime_slideBottom {
    opacity: 0;
    transform: translateY(20px);
    transition-property:all;
    transition-duration:0.5s;
    transition-delay:0s;
    transition-timing-function:ease-in-out;
}
/*とびはねるアニメーション*/
@keyframes bounce {
    0%   { transform: scale(1.0, 1.0) translate(-50%, -20%); } /* 初期状態 */
    30%  { transform: scale(1.5, 0.5) translate(-30%, -20%); } /* 地面に着地し、その変動で潰れだす */
    40%  { transform: scale(1.0, 1.0) translate(-50%, -20%); } /* 潰れた反動で一瞬元に戻る */
    50%  { transform: scale(0.8, 1.3) translate(-60%, -70%); } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    60%  { transform: scale(1.0, 1.0) translate(-50%, -120%); } /* 潰れた反動が終り、空中で元に戻る */
    100% { transform: scale(1.0, 1.0) translate(-50%, -20%); } /* 初期状態に戻る */
}
/*******************************************************************************************
Media Queries
*******************************************************************************************/
@media only screen and (min-width: 1930px) {

}
/* Smaller than standard 1200 */
@media only screen and (max-width: 1199px) {

}
/* Smaller than standard 980 */
@media only screen and (max-width: 991px) {

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

}
@media only screen and (max-width: 780px) {

}
/* Tablet Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

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

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 600px) {

}

/* Mobile Portrait Size */
/*@media only screen and (max-width: 479px) {*/
@media only screen and (max-width: 768px) {
    .wrapper {
        width:100%;
        max-width:100%;
        margin: 0;
        padding:0;
    }
    /*PC用の文章改行を解除*/
    br.br_pc{
        display:none;
    }
    br.br_sm{
        display:block;
    }
    /*header*/
    #header #header_menu_area .wrapper #header_menu h1{
        display:block;
    }
    #header #header_menu_area .wrapper #header_menu #nav ul#nav_menu li.nav_menu_item{
        width:calc(100% / 6);
    }
    #header #header_menu_area .wrapper #header_menu #nav ul#nav_menu li.nav_menu_item.logo_area{
        display:none;
    }
    #header #header_menu_area .wrapper #header_menu #nav ul#nav_menu li.nav_menu_item a.btn .icon_area{
        display:block;
        width:20px;
        height:auto;
    }
    /*service*/

    /*content_slider*/
    #contents_slider{
        padding:10px 10px;
    }
    /*service*/
    #service .inner .list{
        justify-content:center;
        flex-wrap:wrap;
    }
    #service .inner .list .item{
        display:flex;
        justify-content:center;
        width:calc(30%);
        height:100px;
        margin-bottom:50px;
    }
    /*portfolio_second*/
    #portfolio_second .inner ul{
        flex-direction:column;
        margin:0;
    }
    #portfolio_second .inner ul .item_box{
        width:100%;
        padding:0 5%;
    }
    /*content*/
    #contact_container #contact_main{
        margin:0;
    }
    /*footer*/
    #footer #contact_area{
        width:100px;
        height:100px;
    }
    #footer_menu #footer_menu_area ul#footer_menu_lists{
        flex-wrap:wrap;
    }
    #footer_menu #footer_menu_area ul#footer_menu_lists li.footer_menu_item{
        margin-bottom:10px;
    }
    #copyright .logo_area{
        width:100px;
    }

}
@media only screen and (max-width: 320px) {

}
/* Center menu vertically */
@media screen and (min-width: 1025px) {
	
}