@charset "utf-8";

/* ---------------------------------
リセットの役割をする記述
--------------------------------- */

html,body {
	margin: 0;
    padding: 0;
	font-size: 16px;	
	height: 100%;
}


/* タグ余白を持っているものをリセット */
h1,h2,h3,nav,p,ul,dl,dd,figure{
    margin: 0;
    padding: 0;
    font-size: 16px;
    height: 100%;
    list-style: none;
}
/* imgの下余白をなくす */
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
/* text下線をなくす */
a{text-decoration: none;}
/* アドレスのフォントスタイル斜めをなくす */
address{font-style: normal;}

/* BOXの計算方法変更 */
*{box-sizing: border-box;}


/* ---------------------------------
範囲指定の指定、基本設定
--------------------------------- */

body{
    /* background-color: rgba(115, 18, 213, 0.8); */
    background-color: #ffffff; 
}

.wrap{

    width: auto; 
    max-width:  1440px;
    margin: 0 auto;
    /* background-color: rgba(18, 213, 34, 0.8); */
}

.inner{
    width: auto;   
    max-width: 960px;
    margin: 0 auto;
    /* background-color: rgba(0, 255, 255,0.4); */
}

.flex{
    display: flex;
    justify-content: start;
}

/* ---------------------------------
headerの役割をする記述
--------------------------------- */

header{
    /* position: absolute; */
    width: auto;
    max-width: 1440px;

    /* background-color: rgba(252, 246, 246, 0.3); */
}


.company_logo{

    width: auto;
    max-width: 750px;
    height: 161px;

    margin: auto auto;
}



.logo{
    margin: 30px 20px 0px 40px;
    /* margin-top: 20px; */
    /* margin-bottom: 20px; */
    max-width: 140px;
    width: auto;
}

.company{
    display: block;
    color: #e35112;
    text-align: center;
    width: 500px;

    margin-top: 40px;
}

.company_concept{
    width: 340px;
    margin: 0px auto;
}

.company_p1{
    font-size: 16px;
    height: 20px;
    margin-top: 16px;
    padding-left: 10px;
}

.company_p2{
    font-size: 40px;
    height: 50px;
}

.company_p3{
    font-size: 20px;
    height: 36px;
}

.btn{
    /* position: fixed; */
    width: 240px;
    height: 36px;   
    /* top: 140px; */
    /* right: 20px; */
    margin-top: -30px;
    margin-left:  80%;
}

.btn a{
    display: inline-block;
    /* position: fixed; */
    width: 240px;
    line-height: 2.4em;
    background-color: #e35112;
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    border-radius: 10px;
    border: 2px solid #e35112;
    color: #fff;

    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.3);
    /* ホバーを追加する時に必要なコメント */
    transition: background-color 0.2s;
    text-align: center;

    cursor: pointer;

}

.btn a:hover{
    background-color: rgba(241, 90, 36, 0.5);
}


/* ---------------------------------
navの役割をする記述
--------------------------------- */
nav{
    /* padding-top: 200px; */
    background-image: url(../images/background01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: auto;
    max-width: 1440px;
    height: 854px;
    /* height: auto; */
    /* max-height: 854px; */

    border-bottom: solid  #e35112;;
}

.nav_nenu{
    font-size: 24px;
    color: #ffffff;
    text-align: center;

    padding-top: 160px;
    padding-left: 60px;
}

.nav_btn{
    width: 260px;
    height: 36px;
    margin-bottom: 10px;
}

.nav_btn a{
    display: inline-block;
    /* position: fixed; */
    width: 240px;
    line-height: 2.4em;
    background-color: rgba(179, 174, 172, 0.5);
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    border-radius: 6px;
    border: 2px solid rgba(179, 174, 172, 0.5);
    color: #fff;

    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.3);
    /* ホバーを追加する時に必要なコメント */
    transition: background-color 0.2s;

    margin-bottom: 10px;
}

.nav_btn a:hover{
    background-color: rgba(241, 90, 36, 0.5);
    border-bottom: 4px solid #ffffff;
    border-right: 4px solid #ffffff;

}

.business_style{
    height: 80px;
    background-color: rgba(218, 165,32, 0.2);
    text-align: center;

    margin-top: -80px;
}

.business_style P{
    font-size: 40px;
    color: #fff;
    padding-top: 10px;
}

/* ---------------------------------
mainの役割をする記述
--------------------------------- */
main{

}



h2{
    font-size: 20px;
    color: #e35112;
    background-image: url(../images/h2_haikei.png);
    background-repeat: no-repeat;
    background-position: 0%;

    width: 200px;
    height:80px;
    text-align: center;

    margin-top: 20px;
    padding-top: -10px;

}

.picture_01{
    background-image: url(../images/picture_01.png); 
    background-repeat: no-repeat;
    width: 200px;
    height:151px;
}

.h2_01_p{
    width: auto;
    max-width: 600px;
    font-size: 20px;
    line-height: 2.0em;
    color: #333;
    border-top: 4px solid #888888;
    border-bottom: 4px solid #888888;

    margin-left: 240px;
    margin-top: -130px;

    padding: 0px 10px;
}

.more_view{
    /*ボタンの形状*/
    display: block;

    padding: 4px 20px; 
    width: 160px;
    line-height: 1.0em; 
    border-radius:16px;
    margin: 20px auto 30px;

    text-decoration: none;
    text-align: center;
    border:1px solid #fa6c9f;
    color: #fa6c9f;
    outline: none;
    /*アニメーションの指定*/ 
    transition: all 0.4s ease-out;
}

.more_view a{
    color: #333;
}

/*hoverした際、グラデーションと影を付ける*/
.more_view:hover{
    /*ボタンの形状*/
    border-color:transparent;
    color: #fff;
    /*背景の色と形状*/
    background: linear-gradient(270deg, #fa6c9f 0%, #ffe140 50%, #ff357f 100%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/   
    box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}

.more_view a:hover{
    color: #fff;
}

.top_business{
    justify-content: space-between;  
}



.top_business_01_p{
    width: 245px;
    height: 84px;
    font-size: 20px;
    line-height: 2.0em;
    text-align: center;
    color: #333;
    border-top: 4px solid #d2a127;
    border-bottom: 4px solid #d2a127;

    margin-bottom: 10px;
}

.picture_11{
    background-image: url(../images/picture_11.png); 
    background-repeat: no-repeat;
    width: 245px;
    height:244px;
}

.top_business_02_p{
    width: 250px;
    height: 84px;
    font-size: 20px;
    line-height: 2.0em;
    text-align: center;
    color: #333;
    border-top: 4px solid #d2a127;
    border-bottom: 4px solid #d2a127;
    
    margin-bottom: 10px;
}

.picture_13{
    background-image: url(../images/picture_13.png); 
    background-repeat: no-repeat;
    width: 250px;
    height:233px;
}

.top_business_03_p{
    width: 250px;
    height: 84px;
    font-size: 20px;
    line-height: 2.0em;
    text-align: center;
    color: #333;
    border-top: 4px solid #d2a127;
    border-bottom: 4px solid #d2a127;
    
    margin-bottom: 10px;
}

.picture_15{
    background-image: url(../images/picture_15.png); 
    background-repeat: no-repeat;
    width: 250px;
    height:250px;
}

.top_topics_h2{
    background-image: url(../images/background10.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: auto;
    max-width: 960px;
    height: 600px;
}

.top_topics_h2 .toumei{
    background-color: rgba(255, 255, 255, 0.7);
    height: 600px;
}

.top_topics_h2 h2{
    padding-top: 40px;
    height:160px;

    margin: 0 auto;
}

.top_topics_h2 p{
    font-size: 20px;
    color: #333;
    width: auto;
    max-width: 600px;
    line-height: 2.0em;

    margin: 0 auto;
    padding: 0px 2dvh;
}


/* ---------------------------------
footerの役割をする記述
--------------------------------- */

footer{
    width: auto;
    max-width: 1440px;
    height: 360px;
    background-color: #f3fafc;
    
    border-top: solid  #e35112;
}

.footer_nav_nenu_all{
    height: 20px;
    width: 700px;

    margin: 0px auto;
}

.footer_nav_nenu{
    justify-content: space-between;  
    font-size: 16px;
    height: 20px;
    width: 300px;

    margin: 0px auto;
    padding-top: 20px;
    padding-bottom: 20px;

    /* border-bottom: solid #e35112; */
}

.footer_nav_nenu a{
    display: inline-block;
    height: 24px;
    width: 120px;
    color: #333;
    text-align: center;
    border-bottom: 4px solid #777777;

    transition: background-color 0.5s;
}

.footer_nav_nenu a:hover{
    background-color:  rgba(179, 174, 172, 0.5);
    border-bottom: 4px solid #cccccc;
    color: #fff;
}

.footer_nav_nenu .current{
    color: #fff;
    background-color:  rgba(52, 124, 212, 0.5);
    border-bottom: 4px solid rgba(52, 124, 212, 0.5);
}


.footer_company_logo{
    width: auto;
    max-width: 750px;
    height: 161px;

    margin: auto auto;
}

.footer_company{
    display: block;
    color: #e35112;
    text-align: center;
    width: 500px;

    margin-top: 40px;
}

.footer_company_concept{
    width: 340px;
    margin: 0px auto;
}

.footer_company_p1{
    font-size: 16px;
    height: 20px;
    margin-top: 16px;
    padding-left: 10px;
}

.footer_company_p2{
    font-size: 40px;
    height: 50px;
}

.footer_company_p3{
    font-size: 20px;
    height: 36px;
}

address{
    width: 360px;
    text-align: left;
    margin: 0 auto;
}

.footer_btn{
    /* position: fixed; */
    width: 240px;
    height: 36px;   
    margin: 20px auto;
    /* top: 160px; */
    /* right: 30px; */
}

.footer_btn a{
    display: inline-block;
    /* position: fixed; */
    width: 240px;
    line-height: 2.4em;
    background-color: #e35112;
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    border-radius: 10px;
    border: 2px solid #e35112;
    color: #fff;

    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.3);
    /* ホバーを追加する時に必要なコメント */
    transition: background-color 0.2s;
    text-align: center;

    cursor: pointer;
}

.footer_btn a:hover{
    background-color: rgba(241, 90, 36, 0.5);
}




.copyRight{
    text-align: center;
}