@charset "UTF-8";

/*------------------------------------------
    トップページ
------------------------------------------*/
body {
    font-family: "メイリオ", Meiryo;
    font-size: 2rem;
    color: #000;
    background:#F6F6F6;
    /* width: 100vw; */
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    scroll-behavior: smooth;
    text-align: center;
    overflow-x: hidden;
    grid-template:
      "side header header header header header" auto
      "side intro intro intro intro intro"150px
      "side . news news . ." 800px
      "side . . service service ."auto
      "side contact contact contact contact contact"auto
      "side footer_pc footer_pc footer_pc footer_pc footer_pc"auto
      /260px .8fr 1.5fr 14fr 1.6fr 2.5fr;
    /* grid-template:
      "side header header header header header" auto
      "side intro intro intro intro ."200px
      "side . news news . ." 800px
      "side . . service service ."946px
      "side contact contact contact contact contact"670px
      "side footer footer footer footer footer"auto
      /260px 83px 150px 1fr 171px 80px; */
}

/* 画面サイズ判定 */
.pc { display: block !important; }
.sp { display: none !important; }

/* ニュース詳細かの判定 */
.in_news { display: block !important; }
.not_news { display: none !important; }


/* ---------------------------------------------------
メインビジュアル
--------------------------------------------------- */
.header {
    grid-area: header;
    /* height: 46.7vw; */
}

.slider{
    width: 100vw;
      margin:0 auto;
      position: relative;
}
.slider img {
width:100vw;
height: 41.7vw;
}


/* ---------------------------------------------------
企業概要
--------------------------------------------------- */
.intro { 
    grid-area: intro;
    position: relative;
}
.intro_box {
    width: 749px;
    height: 424px;
    background-color: #fff;
    box-shadow: 0 0 10px #00000029;
    position: absolute;
    top: -194px;
    right: 80px;
}

.intro h1{
    font-size: 64px;
    color: #042440;
    font-family: 'Times New Roman';
    font-weight: bold;
    margin:60px 0 0 0;
}
.intro p{
    font-size: 16px;
    font-family: 'Noto Serif JP', serif;
    display: inline-block;
    width: 630px;
    height: 83px;
    margin: 40px 60px;
    line-height: 1.875;
    text-align: left;
}


/* ---------------------------------------------------
お知らせ
--------------------------------------------------- */
.news { 
    grid-area: news;
    background-color: #fff;
}

.news .contents_title{
    margin: 160px 0 100px 0;
}

.news table{
    width: 52.1vw;
    height: 198px;
}

.news .button_nextpage{
    margin-top: 80px;
}


/* ---------------------------------------------------
取扱業務
--------------------------------------------------- */
.service { 
    grid-area: service;
    text-align: center;
}

.service .contents_title{
    margin: 87px 0 69px 0;
}

/* .service .container{
    height: 480px;
} */

.service .button_nextpage{
    margin: 80px 0;
}

/* ---------------------------------------------------
コンタクト
--------------------------------------------------- */
.contact .contents_title{
    margin: 87px 0 80px 0;
}
.contact p{
    font-size: 24px;
    font-family: 'Noto Serif JP', serif;
    font-weight: normal;
}

#contact_btn{
    margin: 80px 0;
}

/* @media screen and (max-width:1500px){

} */

@media screen and (max-width:1500px){
    body {
        font-family: "メイリオ", Meiryo;
        font-size: 2rem;
        color: #000;
        background:#F6F6F6;
        /* width: 100vw; */
        margin: 0 auto;
        min-height: 100vh;
        display: grid;
        scroll-behavior: smooth;
        text-align: center;
        overflow-x: hidden;
        grid-template:
          "side header header header" auto
          "side . intro . "150px
          "side . news  ." 800px
          "side . service  ."auto
          "side contact contact contact"auto
          "side footer_pc footer_pc footer_pc"auto
          /260px .2fr  7fr  .2fr;
        /* grid-template:
          "side header header header header header" auto
          "side intro intro intro intro ."200px
          "side . news news . ." 800px
          "side . . service service ."946px
          "side contact contact contact contact contact"670px
          "side footer footer footer footer footer"auto
          /260px 83px 150px 1fr 171px 80px; */
    }

    
/* ---------------------------------------------------
メインビジュアル
--------------------------------------------------- */
.header {
    grid-area: header;
    height: 46.7vw;
}

.slider{
    width: 100vw;
      margin:0 auto;
      position: relative;
}
/* .slider img {
width:100vw;
height: 46.7vw;
}    */
   
    .intro_box {
        top: -130%;
        right: 0;
    }
}

@media screen and (max-width:1200px) { 
    .intro_box {
        width: 653px;
        height: 400px;
        background-color: #fff;
        box-shadow: 0 0 10px #00000029;
        position: absolute;
        top: -113%;
        right: 0;
    }
    .intro h1 {
        font-size: 56px;
    }
    .intro p {
        font-size: 16px;
        width: 530px;
        margin: 30px 60px;
    }

}

@media screen and (max-width:1000px) { 
    .slider img {
        width: 100vw;
        height: 46.7vw;
    }
    .intro_box {

        right: initial;
        left: 15px;
    }

    .news {
        width: 683px;
    }
    .news table {
        width: 520px;
    }

}

@media screen and (max-width:500px) { 
body {
    font-family: "メイリオ", Meiryo;
    font-size: 2rem;
    color: #000;
    background:#F6F6F6;
    width: 100vw;
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    scroll-behavior: smooth;
    text-align: center;
    overflow-x: hidden;
    grid-template:
      "header_sp header_sp header_sp" 60px
      "mainvisual mainvisual mainvisual" auto
      ". intro ."204px
      ". news ."auto
      ". service ." auto
      "contact contact contact"auto
      "footer_sp footer_sp footer_sp"auto
      / auto 360px auto;
}
.pc { display: none !important; }
.sp { display: block !important; }



/* ---------------------------------------------------
メインビジュアル
--------------------------------------------------- */
.mainvisual {
    grid-area: mainvisual;
    /* width: 100vw;
    height: 451px;
    background-color: lawngreen; */
}
.mainvisual .slider {
    width: 100vw;
    margin: 0;
    position: relative;
}
.mainvisual .slider img {
    height: initial;
}

/* ---------------------------------------------------
企業概要
--------------------------------------------------- */
.intro_box {
    width: 324px;
    height: 325px;
    padding-top: 32px;
    top: -110px;
    left: 4vw;
    background-color: rgb(255, 255, 255);
    border: 3px solid #fff;
}
.intro h1 {
    font-size: 30px;
    margin: 30px 0 20px 0;
}

.intro p {
    font-size: 14px;
    width: 296px;
    height: 125px;
    margin: 0 auto;
    line-height: 1.5;
}


/* ---------------------------------------------------
お知らせ
--------------------------------------------------- */
.news {
    width: 100%;
}
.news .contents_title {
    margin: 80px 0 30px 0;
}

.news .button_nextpage {
    margin: 40px 0;
}

.news table {
    width: 310px;
    height: 198px;
}

/* ---------------------------------------------------
取扱業務
--------------------------------------------------- */
.service .contents_title {
    margin: 40px 0 ;
}

.service .button_nextpage {
    margin: 8px 0 50px 0;
}




/* ---------------------------------------------------
コンタクト
--------------------------------------------------- */

.contact .contents_title {
    margin: 35px 0 30px 0;
}
.contact p {
    font-size: 14px;
}





}