@charset "utf-8";

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Common(PC.SP共通設定)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
* {
	box-sizing: border-box;
}

html {
    font-size: 62.5%;
	overflow-y: scroll;
}

body {
	/* ゴシック体系のフォント指定 */
    font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-rendering: optimizeLegibility;

}
h1,h2,h3,h4,h5,h6 {
    font-family:'Noto Sans JP', sans-serif;
}

.serif {
	/* 明朝体系(セリフ体)のフォント指定 */
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

main {
	display: block;
}
img {
	display: block;
	width: 100%;
	height: auto;
    }
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: none;
}
a:link { color: #000; }
a:visited { color: #000; }
a:active { color: #000; }
a img {
	transition: all 0.2s ease-in-out;
}
a:hover {
	opacity: 0.8;
}
ul,
ol {
	list-style: none;
}

div.wrap{
    background-color:#EEEFEF;
    padding: 15px 0;
}
/*----------デバイスで表示切り替え----------*/
@media only screen and (min-width:768px) {
.pc_none {
    display:none;
}
}
@media only screen and (max-width:767px) {
.sp_none {
        display:none;
    }
}
/*----------フェード----------*/
.scroll-space{
    padding-top: 0;
    height: auto;
    overflow: hidden;
}
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
  .fadein-bottom{
      transform: translate(0,30px);
  }
  .scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }

/*=======================================
header ここから
----------------------------------------*/
/*-----共通設定-----*/
header {
    width:100%;
    padding:0.7rem 0;
}
header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width:960px;
    margin:0 auto;
}
header .inner h1 {
    width:400px;
    max-width:100%;
    height:auto;
    margin: 0 auto;
}
/*-----画面幅768px以上-----*/
@media only screen and (min-width:768px) {

header .inner nav ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .inner nav ul li{
    display:block;
    padding:1.6rem;
}
header .inner nav ul li a{
    font-size:1.4rem;
    line-height:1;
}

}
/*-----画面幅767px以下-----*/
@media only screen and (max-width:767px) {

    header .inner h1 a img {
        width:40vw;
        max-width:200px;
        height:auto;
    }
    /*ハンバーガーメニュー*/
    nav.NavMenu{
        position: fixed; /*表示位置を固定*/
        z-index: 10;
        top: 0;
        left: 0;
        background: #fff;
        background-color: rgba(0,0,0,0.5);
        text-align: center;
        width: 100%; 
        transform: translateY(-100%); /*ナビを上に隠す*/
        transition: all 0.6s; /*アニメーションの時間を指定*/
    }
    nav.NavMenu ul{
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        margin: 0 auto;
        padding: 0;
        padding-top: 2%;
        padding-bottom: 2%;
    }
    nav.NavMenu ul li{
        font-size: 1.6rem;
        list-style-type: none;
        width: 100%;
        padding-bottom: 0px;
        border-bottom: 1px #fff solid;
    }
    nav.NavMenu ul li:last-child{
        padding-bottom: 0;
    }
    nav.NavMenu ul li a{
        display: block;
        color: #fff;
        padding: 1rem 0;
    }
    /*トグルボタンが押されたときに付与するクラス*/
    nav.NavMenu.active{
        transform: translateY(0%);
    }
    /*トグルボタンのスタイルを指定*/
    .Toggle {
        position: fixed;
        right: 1rem;
        top: 1.7rem;
        width: 36px;
        height: 36px;
        cursor: pointer;
        z-index: 13;
        background-color: rgba(0,0,0,0.5);
        border-radius:2px;
    }
    .Toggle span {
        display: block;
        position: absolute;
        width: 24px;
        border-bottom: solid 3px #fff;
        -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
        -moz-transition: .35s ease-in-out;    /*変化の速度を指定*/
        transition: .35s ease-in-out;     /*変化の速度を指定*/
        left: 6px;
    }
    .Toggle span:nth-child(1) {
        top: 8px;
    }
    .Toggle span:nth-child(2) {
        top: 16px;
    }
    .Toggle span:nth-child(3) {
        top: 24px;
    }
    /* 最初のspanをマイナス45度に */
    .Toggle.active span:nth-child(1) {
        top: 18px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
        border-bottom: solid 3px #fff;
    }
    /* 2番目と3番目のspanを45度に */
    .Toggle.active span:nth-child(2),
    .Toggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        border-bottom: solid 3px #fff;
    }

    header .inner h1 {

        margin: 0 auto;
    }

    header .inner {

        margin:0 auto;
    }
}
/*-----画面幅767px以下-----*/
@media only screen and (max-width:767px) {
    header .inner h1 {
        width: 75%;
        margin:0 auto;
        }
}

/*---------------------------------------
header
=======================================*/


.btn_message {
    width:100%;
    height:auto;
    background-color:#c9caca;
    padding:3rem 0;
    }

    .btn_message .wrap {
        width:100%;
        max-width:960px;
        height:auto;
        background-color:#c9caca;
        padding:0 3rem;
        margin:0 auto;
        }
        .btn_message .wrap h3{
            font-size:2.6rem;
            font-weight:bold;
            text-align:center;
            margin-bottom:3rem;
        }
        .btn_message .wrap p{
            font-size:1.4rem;
    line-height:1.7;
    text-align:justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
        }
        .btn_message .wrap ul{
            display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    align-self: flex-start;
    width:100%;
    max-width: 960px;
    margin:2rem auto;
            }
            .btn_message .wrap ul li {
            width:48%;
            height:auto;
            }
            .btn_message .wrap ul li a{
                position:relative;
                display: block;
                width:100%;
            height:auto;
            font-size:2rem;
            text-align: center;
            background-color:#898989;
            padding:1rem;
                }
                .btn_message .wrap ul li a::after {
                    position: absolute;
    display: inline-block;
    content: "";
    background-image: url(../img/btn_arrow01.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    right: 10px;
                }
    /*-----画面幅767px以下-----*/
@media only screen and (max-width:767px) {
    .btn_message {
        padding:4% 0 2%;
    }
    .btn_message .wrap {
        padding:0 2%;
    }
    .btn_message .wrap ul{
        flex-direction:column;
    }
    .btn_message .wrap ul li {
        width:100%;
        margin:0 auto 2%;
}
.btn_message .wrap h3{
    font-size:2rem;
    margin-bottom:2rem;
}

}
/*-----画面幅375px以下-----*/
@media only screen and (max-width:375px) {
}
/*-----画面幅320px以下-----*/
@media only screen and (max-width:320px) {
}

/*=======================================
#fv
----------------------------------------*/
/*-----共通設定-----*/

#fv {
width: 960px;
margin:20px auto;
}
#fv .inner {
    width:100%;
    max-width:960px;
    margin:0 auto;
}
#fv .inner img{
    width:100%;
    height:auto;
}
/*-----画面幅767px以下-----*/
@media only screen and (max-width:767px) {
    #fv {
        width: 95%;
        margin:20px auto;
        }
}
/*-----画面幅375px以下-----*/
@media only screen and (max-width:375px) {
}
/*-----画面幅320px以下-----*/
@media only screen and (max-width:320px) {
}

/*---------------------------------------
#fv
=======================================*/
.company{
    padding: 25px 0;
    width: 960px;
    background-image:url(../img/back.jpg);
    margin: 20px auto;
    }

.board{
    opacity: none;
    margin-bottom: 20px;
    display: flex;
    padding-top: 25px;
    }

.white{
    width: 820px;
    margin: 0 auto;
    background-color: rgba(255,255,255,0.8);
    padding: 25px;
    }
    
.info_left {
    font-weight: bold;

    width: 120px;
    padding: 10px;
    text-align: right;
    font-size: 17px;
}

.info_right {
    font-weight: bold;

    width: 380px;
    padding: 10px;
    text-align: left;
    font-size: 17px;
    border-left: 1px solid #A60000;
}

    .title{
        padding: 20px;
        text-align: center;
        font-size: 35px;
        font-weight: bold;
        color: #22939F;
    }
        
    .photo{

        width: 279px;   
        }
        
    .color{
        text-align: center;

        height: 200px;
        background-color: #A60000;
        }
    
    .copy{
        font-weight:bold;
        font-size: 20px;
        color: white;
        padding: 20px;
        padding-top: 50px;
        }
    
    .btn{
        margin: 0 auto;
        background-color: #00CCFF;
        width: 775px;
        padding: 20px;
        box-shadow: 5px 5px 5px #999;
        }

        .btn_name{
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            color: #fff;
            }
    
    .btn:hover {
        background-color: #FF39BD;
        transition: background-color 0.3s ease 0s;
    
    }

    /*-----画面幅767px以下-----*/
@media only screen and (max-width:767px) {
.companywrap{
width: 100%;
margin: 20px auto;
font-size: 12px !important;
}

.company{
    width: 100%;
margin: 20px auto;
}
    

.white{
width: 100%;
padding: 5% 2% 5% 2%;

}

.board{
    padding: 0;
}

.btn{
width: 95%;
font-size: 13px;
padding: 3% 0;
}

.btn_name{
    font-size: 13px;
    }

.title{
width: 95%;
}
                        
.photo{    
    display: none;
}

.info_left {

    font-size: 10px;
    text-align: left;
    padding: 10px;
  
}

.info_right {
    width: 95%;
    font-size: 10px;
    text-align: left;
    padding-left: 10px;

}
                
.copy{
font-size: 13px;
text-align: left;
    }
        
}
/*=======================================
#contents_mailform
----------------------------------------*/
#contents_mailform {
    padding:2.6rem 0;
}
#contents_mailform .inner{
    padding:0 2.6rem;
}
#contents_mailform .inner h3 {
    font-size:2.6rem;
    font-weight:bold;
    text-align:center;
    margin-bottom:1em;
}
#contents_mailform .inner form table {
    width:100%;
    max-width: 900px;
    margin: 0 auto  2.6em;
    border-collapse:collapse
}

#contents_mailform .inner form tr {
font-size:1.6rem;
border-top:solid 1px #000;
    border-bottom:solid 1px #000;
}
#contents_mailform .inner form tr .label_required {
font-size:1.4rem;
color:#fff;
background-color:#000;
border-radius:3px;
padding:0.3rem 0.7rem;
margin-left:1.4rem;
}
#contents_mailform .inner form tr th {
    width:28rem;
    padding:1.6rem 0 1.6rem 1.6rem;
    vertical-align: middle;
}

#contents_mailform .inner form tr td {
padding:1.6rem;
    vertical-align: middle;
}
#contents_mailform .inner form tr input,
#contents_mailform .inner form tr textarea {
width:100%;
    padding: 0.5rem;
border:1px #000 solid;
    vertical-align: middle;
}

#contents_mailform .inner form tr select {
    width: 100%;
    margin: 0;
    padding: 0.5rem;
    background: url(../img/select_ya.png) right 10px center no-repeat #fff;
    font-size: 1.6rem;
    border:1px #000 solid;
}

#contents_mailform .inner form tr .select {
}
#contents_mailform .inner form tr .privacy {
margin-bottom:1.6rem;
}
/*性別ほか labelタグ右側に余白*/
#contents_mailform .inner form tr td label {
font-size:1.6rem;
margin-right:1rem;
vertical-align:middle;
}

#contents_mailform form .wrap_button {
padding:2.6rem;
text-align:center;
}

#contents_mailform form button {
    width:100%;
    max-width:460px;
    height:auto;
    font-size:2.6rem;
    padding:2.6rem 0;
    color:#fff;
    background-color:#A60000;
    text-align:center;
    margin:0 auto;
    font-weight: bold;
}

#contents_mailform .inner form button:hover {
    opacity: 0.5;
    transition: all 0.2s ease-in-out;
}

/*-----画面幅767px以下-----*/
@media only screen and (max-width:767px) {

    #contents_mailform .inner form tr th {
        display:block;
        padding-bottom:0;
    }
    #contents_mailform .inner form tr td {
        display:block;
    }
}
/*-----画面幅375px以下-----*/
@media only screen and (max-width:375px) {
}
/*-----画面幅320px以下-----*/
@media only screen and (max-width:320px) {
}
/*---------------------------------------
#contents_mailform
=======================================*/


/*=======================================
footer
----------------------------------------*/
footer {
        width:100%;

        padding:2.4rem 0 0;
}
footer .inner {
    width:100%;
    padding:2.4rem 3rem;
}
/*--ボタン-電話番号-メールフォーム--*/
footer .inner .menu_contact {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    max-width:960px;
    padding:1.6rem 0;
    margin:0 auto;
    }
footer .inner .menu_contact li {
}
footer .inner .menu_contact li a{
    color:#fff;
    font-weight:bold;
}
footer .inner .menu_contact li.link_tel{
position:relative;
    font-size:4rem;
}
footer .inner .menu_contact li.link_tel a::before {
    position:absolute;
    display:inline-block;
    content:"";
    background-image:url("../img/footer_icon_tel.png");
    background-size:contain;
    width:28px;
    height:28px;
    top:0.8rem;
    left:-0.6rem;
    margin-left:-2.8rem;
}
footer .inner .menu_contact li.link_mail{
    position:relative;
    font-size:4rem;
    font-size:2.6rem;
}
footer .inner .menu_contact li.link_mail a::before {
    position:absolute;
    display:inline-block;
    content:"";
    background-image:url("../img/footer_icon_mail.png");
    background-size:contain;
    width:28px;
    height:28px;
    top:0;
    left:-0.6rem;
    margin-left:-2.8rem;
}
/*--ロゴ-社名-住所--*/
footer .inner .wrap_company_info {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    flex-wrap:no-wrap;
    max-width:960px;
    padding:1.6rem 0;
    margin:0 auto;
}
footer .inner .wrap_company_info img {
width: 200px;
max-width: 100%;
height: auto;
margin:0 3rem 0 0;
}
footer .inner .wrap_company_info .name {
font-size:3rem;
margin-right:3rem;
}
footer .inner .wrap_company_info .name .address {
display:block;
    font-size:1.6rem;
    line-height:1.5;
}
/*--コピーライト--*/
footer .copyright{
    font-size:12px;
    color:#fff;
    background-color:#1A448A;
    text-align:center;
    padding:2.4rem 0;
}
/*-----画面幅767px以下-----*/
@media only screen and (max-width:767px) {

footer .inner {
    padding:0 2%;
    }
/*--ボタン-電話番号-メールフォーム--*/
footer .inner .menu_contact li {
    margin-bottom:1.6rem;
    }
    footer .inner .menu_contact li a {
    font-size:1.8rem;
    }

footer .inner .menu_contact {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    align-self: center;
    padding:0;
    margin:0 auto;
}
footer .inner .menu_contact li.link_tel a::before {
        top:1.2rem;
        left:-0.6rem;
    }
/*--ロゴ-社名-住所--*/
footer .inner .wrap_company_info {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: center;
        padding:0 0 1.6rem;
        margin:0 auto;
    }
footer .inner .wrap_company_info img {
        width: 200px;
        max-width: 100%;
        height: auto;
        margin:0 auto 1.6rem ;
    }
footer .inner .wrap_company_info .name{
        margin:0 0 1.6rem 0;
    }

}
/*-----画面幅375px以下-----*/
@media only screen and (max-width:375px) {
}
/*-----画面幅320px以下-----*/
@media only screen and (max-width:320px) {
}


/*---------------------------------------
footer
=======================================*/
/*========================================
#btn_fixed
---------------------------------------*/
#btn_fixed {
    position:fixed;
    bottom:0;
    width:100%;
    background-color: rgba(0,0,0,0.7);
    padding:18px 0 9px;
    z-index:9999;
    box-sizing: border-box;
}
#btn_fixed .inner {
    width:100%;
    max-width:960px;
    height:auto;
    margin:0 auto;
    }

#btn_fixed ul {
     display:flex;
     justify-content: space-between;
    flex-wrap:nowrap;
    width:100%;
    padding:0 3rem;
    margin:0 auto;
}
#btn_fixed ul li {
    width:100%;
    max-width:48%;
    text-align: center;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color:#fff;
}
#btn_fixed ul li a {
    position:relative;
    display:block;
    width:100%;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    text-align: center;
    padding:0.7em;
    margin:0 auto;
    border-radius: 5px;
}
#btn_fixed ul li:nth-child(1){
    background-color:#9fa0a0;
}
#btn_fixed ul li:nth-child(2){
    background-color:#c9caca;
    }
    
#btn_fixed ul li a::after {
    position:absolute;
    content:"";
    width:8px;
    height:12px;
    background-image:url(../img/btn_fixed_arrow01.png);
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    top:calc(50% - 6px);
    right:8px;
}
    #btn_fixed ul li:nth-child(odd) {
        margin-right:10px;
    }
    #btn_fixed ul li:nth-child(even) {
        margin-left:10px;
    }
/*-----画面幅768px以下-----*/
@media only screen and (max-width:768px) {
    #btn_fixed ul {
    flex-direction: column;
    }
    #btn_fixed ul li {
        max-width:100%;
        margin:0 auto 10px;
    }
        #btn_fixed ul li:nth-child(odd) {
            margin-right:0;
        }
        #btn_fixed ul li:nth-child(even) {
            margin-left:0;
        }
}
    
/*---------------------------------------
#btn_fixed
=======================================*/