@charset "utf-8";
/********************************/
/*レイアウト用ＣＳＳ（基本設定）   */
/********************************/

/*背景、文字色、フォントなど   */
body{
    background:#fff;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    sans-serif;
	color: #222;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
}

/*段落：リストスタイル無し  */
ul{
	margin:0;
	padding: 0;
	list-style: none;
}

/*リンク：文字色・ライン表示  */
a{
	color: #222;
	text-decoration: none;
    outline: none;
}

/*画像  */
img{
    height: auto;
    vertical-align: bottom;
}

/*ボックス：padding、borderを含んだサイズ  */
*{
    box-sizing: border-box
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media screen and (min-width:501px) {
    .sp {
        display: none !important;
    }
    }

@media screen and (max-width:500px) {
.pc {
    display: none !important;
}
}

/* 印刷しない要素 */
@media print {
    .sp,
    .hideInPrint,
    #mailPage,
    #page-top{
        display: none;
    }
}

/**********************************/
/*フォント  					   */
/**********************************/

/* 明朝のみ指定 */
#contents .top-h3,
#contents .h4-l
#contents .contents-text-plus{
    font-family: 'Noto Serif JP', sans-serif;
}

/* Cabin Sketch */
#contents .top-h2{
    font-family: 'Cabin Sketch', sans-serif;
}

/**********************************/
/*本文      					   */
/**********************************/

#wrapper{
    position: relative;
}

/**********************************/
/*ヘッダー   					   */
/**********************************/

/* heading */
#header{
    justify-content: center;
}

#header .header-area{
    text-align:center;
    padding:0 auto;
}

#header img{
    width: 100%;
    max-width: 1000px;
}

#header h1{
    color:#D0CECE;
    font-size:12px;
    font-weight: normal;
    text-align:center;
}

@media screen and (max-width:540px) {
    #header h1{
        color:#D0CECE;
        font-size:10px;
        font-weight: normal;
        text-align:center;
    }
}

/**********************************/
/*コンテンツ                       */
/**********************************/

/* section */
#contents{
    position: relative;
    justify-content: center;
    margin:0 auto 3rem auto;
}

/* コンテンツトップ画像 */
#contents .top-img{
    height:20vh;
    width:100%;
    max-width:1000px;
    background:url(../img/001_s_banner.jpg) no-repeat;
    background-size:cover;
    padding:1rem;
}

#contents .top-h2{
    text-transform: uppercase; /* 大文字指定 */
    font-weight: normal;
    font-size:2.5rem;
    padding:1rem 0 0 0;
    color: #fff;
}

#contents .top-h3{
    font-size:1.25rem;
    color: #fff;
}

@media screen and (max-width:500px) {
    #contents.top-h2{
        text-transform: uppercase; /* 大文字指定 */
        font-weight: normal;
        font-size:2rem;
        padding:1rem 0 0 0;
    }

    #contents.top-h3{
        font-size:1rem;
        padding:0.5rem auto;
    }
}

/* トップエリア */
#contents .top-area{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align:center;
    margin:0 auto;
    max-width:1000px;
    justify-content: center;
}

/* 背景グレー */
#contents .contents-area-g{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align:left;
    margin:0 auto 3rem auto;
    padding:1rem auto;
    max-width:1000px;
    background-color:#D0CECE;
    justify-content: center;
    align-items: flex-start;
}

/* 背景白 */
#contents .contents-area-w{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align:left;
    margin:0 auto 3rem auto;
    padding:1rem auto;
    max-width:1000px;
    background-color:#fff;
    justify-content: center;
    align-items: flex-start;
}

/* 文章枠 */
#contents .contents-text{
    max-width:600px;
    margin:0 auto;
    padding:1rem;
    font-size:1rem;
}
/* 文章枠２（ボトム表記） */
#contents .contents-text-b{
    margin:auto 0 0 0;
    padding:1rem;
    font-size:1rem;
}
/* 文章枠３（全体表示） */
#contents .contents-text-all{
    max-width:900px;
    width:100%;
    text-align:center;
    margin:0 auto;
    padding:1rem;
    font-size:1rem;
}
/* 文章枠４（ＱＡ用） */
#contents .contents-text-qa{
    max-width:900px;
    text-align:left;
    margin:0 auto;
    padding:1rem;
    font-size:1rem;
}
@media screen and (max-width:980px) {
    #contents .contents-text-qa{
        width:90%;
    }
}
/* 文章枠５（注釈用・枠あり。上記で明朝指定入ってます） */
#contents .contents-text-plus{
    max-width:700px;
    text-align:left;
    margin:0 auto;
    padding:1rem;
    font-size:0.9rem;
    border: 1px solid;
    background-color:#eee;
}

/* 文章枠６（イベント用・枠あり） */
#contents .contents-text-event{
    max-width:800px;
    width:100%;
    text-align:left;
    margin:1rem auto;
    padding:1rem 1rem 1rem 0rem;
    border: 1px solid;
    background-color:#eee;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
#contents .contents-text-event-t{
    max-width:480px;
    width:60%;
}
/* 記事・fotrama用 */
#contents .contents-text-event-if{
    max-width:320px;
    width:40%;
    margin:auto;
    padding:0.5rem;
    background-color:#fff;
    border:1px solid #000;
}
#contents .contents-text-event-i{
    max-width:320px;
    width:40%;
    margin:auto;
}
@media screen and (max-width:980px) {
    #contents .contents-text-event-t{
        width:100%;
        margin:0 auto;
    }
    #contents .contents-text-event-i{
        width:100%;
        margin:0 auto;
    }
    #contents .contents-text-event-if{
        width:100%;
        margin:0 auto;
    }
}
#contents .contents-text-event-i1{
    max-width:320px;
    width:95%;
    margin:1rem;
}
#contents .contents-text-event-t1{
    border-bottom:1px solid #000;
    font-size:1.25rem;
    padding: 0rem 1rem;
}
#contents .contents-text-event-t2{
    padding:1rem;
    font-size:0.9rem;
    width:100%;
}
#contents .contents-text-event-t3{
    text-align:right;
    padding:0rem 1rem 0rem 0rem;
    font-size:1rem;
}

/* 文章枠（コンセプト背景） */
#contents .contents-text-concept{
    max-width:600px;
    margin:0 auto;
    padding:1rem;
    font-size:1rem;
    background:url(../img/007_back_logo.png) no-repeat;
    background-position:center;
}

/* ＱＡタイトル文字 */
#contents .h4-title-qa{
    max-width:900px;
    width:90%;
    text-align:left;
    margin:0 auto;
    padding:2rem 0;
    font-size:1.5rem;
}

@media screen and (max-width:500px) {
    #contents .contents-text-qa{
        width:50%;
    }
}

/* 文章タイトル */
#contents h4{
    font-size:1.5rem;
    margin:2rem 0;
}
/* コンテンツ内文字強調（大きく表示、明朝体） */
#contents .h4-l{
    font-size:2rem;
}
/* コンテンツタイトル文字 */
#contents .h4-title{
    font-size:1.5rem;
    margin:0 auto;
    padding:2rem 0;
    text-align:center;
}
/* コンテンツ内文字小さく */
#contents .font-s{
    font-size:0.9rem;
}

/* 画像枠 */
#contents .contents-img{
    margin:1rem 0.5rem auto 0.5rem;
}
/* 画像 */
#contents img{
    margin:0 auto;
    padding:0.5rem;
    border:1px solid;
    background-color:#fff;
}

/* 画像（枠無し・ちょっと小さめMAX900pxバージョン） */
#contents .bg-img{
    margin:1rem auto;
    padding:0;
    border:0px;
    background-color: transparent;
    width:100%;
    max-width:900px;
}
/* 画像（枠無し・最大値MAX1000pxバージョン） */
#contents .bg-img-l{
    margin:0 auto;
    padding:0;
    border:0px;
    background-color: transparent;
    max-width:1000px;
    width:100%;
}
/* 画像（枠無し・その大きさで表記） */
#contents .bg-img-s{
    margin:1rem auto;
    padding:0;
    border:0px;
    background-color: transparent;
}
/* 画像（QAアイコンバージョン） */
#contents .bg-img-qa{
    margin:1rem auto;
    padding:0;
    border:0px;
    background-color: transparent;
    max-width:60px;
}


/* コンテンツタイトル背景（その１） */
#contents .bg-img-title01{
    width:100%;
    max-width:500px;
    background:url(../img/501_title01.png) no-repeat;
    background-size:contain;
    background-position:center;
    margin:auto;
}
/* コンテンツタイトル背景（その２） */
#contents .bg-img-title02{
    width:100%;
    max-width:500px;
    background:url(../img/501_title02.png) no-repeat;
    background-size:contain;
    background-position:center;
    margin:auto;
}
/* コンテンツタイトル背景（その３） */
#contents .bg-img-title03{
    width:100%;
    max-width:500px;
    background:url(../img/501_title03.png) no-repeat;
    background-size:contain;
    background-position:center;
    margin:auto;
}

/* 黄色マーカー */
#contents .y-marker {
    background:linear-gradient(transparent 60%, #ff6 60%);
    font-weight:bold;
}
/* オレンジ色マーカー */
#contents .o-marker {
    background:linear-gradient(transparent 60%, #ffc000 60%);
    font-weight:bold;
}
/* 黄緑色マーカー */
#contents .m-marker {
    background:linear-gradient(transparent 60%, #70cc11 60%);
    font-weight:bold;
}

@media screen and (max-width:990px) {
    /* 画像枠 */
    #contents .contents-img{
        margin:auto;
    }
}

@media screen and (max-width:500px) {
    #contents .contents-text{
        margin:2rem auto;
        padding:1rem;
        font-size:1rem;
    }
}

/**********************************/
/*テーブル      				   */
/**********************************/

.table01{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.table01 th,.table01 td{
    padding: 10px 0;
    text-align: center;
    padding:0.5rem 2rem;
 }

.table01 tr:nth-child(even){
    background-color: #eee
}

/**********************************/
/*フッター      				   */
/**********************************/

/* footer */
#footer{
    justify-content: center;
}

/* フッター画像 */
#footer .footer-img{
    height:50vh;
    width:100%;
    max-width:1000px;
    background:url(../img/001_s_banner.jpg) no-repeat;
    background-size:cover;
    margin:1rem auto;
    padding:1rem;
}

#footer .footer-area{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #fff;
}

#footer .footer-area a{
    color: #fff;
    transition: all .3s;
}

#footer .footer-area a:hover{
    color:#ff6600;
}

#footer .footer-area ul,
#footer .footer-area dl{
    width:25%;
    line-height: 2;
    margin: auto 2rem;
}

#footer .footer-area ul li::before{
    content: '|';
    font-weight: bold;
    padding: 0 10px;
    color:#ff6600;
}

#footer .footer-area dt{
    text-transform: uppercase;
    margin: 0 0 10px 0;
    font-size: 1.3rem;
}

.mgl-30{
    margin-left : 30px;
}

small{
    text-align: center;
    text-transform: uppercase;
    display: block;
    color:#fff;
}

@media screen and (max-width:800px) {
    #footer .footer-img{
        height:75vh;
    }
}

@media screen and (max-width:650px) {
    #footer{
    padding: 0px 30px 0 30px;
    }
    #footer .footer-area ul,
    #footer .footer-area dl{
    border-top: 1px solid #999;
    width: 100%;
    margin: 0 0 30px 0;
    padding:30px 0 0 0;
    line-height: 2.5;
    }
    #footer .footer-area dl{
        text-align: center;
    }
    #footer .footer-img{
        height:150vh;
    }
}

/**********************************/
/*資料請求ボタン　ここから 	     	*/
/**********************************/

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

.btn,
a.btn,
button.btn {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
}

.btn-wrap {
    margin: 3rem auto;
}

a.btn-c {
    font-size: 1.5rem;

    position: relative;

    padding: 0.25rem 2rem 1.5rem 3.5rem;

    color: #fff;
    background: #e94919;
    -webkit-box-shadow: 0 5px 0 #d44114;
    box-shadow: 0 5px 0 #d44114;
}

a.btn-c span {
    font-size: 1rem;

    position: absolute;
    top: -1.25rem;
    left: calc(50% - 150px);

    display: block;

    width: 300px;
    padding: 0.2rem 0;

    color: #d44114;
    border: 2px solid #d44114;
    border-radius: 100vh;
    background: #fff;
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a.btn-c span:before,
a.btn-c span:after {
    position: absolute;
    left: calc(50% - 10px);

    content: "";
}

a.btn-c span:before {
    bottom: -10px;

    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #d44114 transparent transparent transparent;
}

a.btn-c span:after {
    bottom: -7px;

    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    }

a.btn-c i {
    margin-right: 1rem;
}

a.btn-c:hover {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);

    color: #fff;
    background: #eb5b30;
    -webkit-box-shadow: 0 2px 0 #d44114;
    box-shadow: 0 2px 0 #d44114;
}

/**********************************/
/*資料請求ボタン　ここまで 	     	*/
/**********************************/

/**********************************/
/*slider 複数画像を並列に見せる     */
/**********************************/
.event {
	width:90%;/*横幅90%で左右に余白を持たせる*/
	max-width:960px;/*コンテンツに余白をつける*/
	margin: 0 auto;  /* ボックス中央寄せ */
	padding:1rem;
}

.event img {
	width:100%;/*スライダー内の画像を横幅100%に*/
	max-width:300px;/*スライダー内の画像を最大横幅300pxに*/
	margin: 0 auto;  /* ボックス中央寄せ */
	height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.event .slick-slide {
	margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
	position: absolute;/*絶対配置にする*/
	top: 70%;
	cursor: pointer;/*マウスカーソルを指マークに*/
	outline: none;/*クリックをしたら出てくる枠線を消す*/
	border-top: 2px solid #222;/*矢印の色*/
	border-right: 2px solid #222;/*矢印の色*/
	height: 15px;
	width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
	left: -1.5%;
	transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
	right: -1.5%;
	transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
	display:inline-block;
	margin:0 5px;
}

.slick-dots button {
	color: transparent;
	outline: none;
	width:8px;/*ドットボタンのサイズ*/
	height:8px;/*ドットボタンのサイズ*/
	display:block;
	border-radius:50%;
	background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
	background:#ff6600;/*ドットボタンの現在地表示の色*/
}

/**********************************/
/*slider 複数画像を並列に見せる（施工事例用）     */
/**********************************/
.blog {
	width:90%;/*横幅90%で左右に余白を持たせる*/
	max-width:320px;/*コンテンツに余白をつける*/
	margin: 0 auto;  /* ボックス中央寄せ */
	padding:1rem;
}

.blog img {
	width:100%;/*スライダー内の画像を横幅100%に*/
	max-width:300px;/*スライダー内の画像を最大横幅300pxに*/
	margin: 0 auto;  /* ボックス中央寄せ */
	height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.blog .slick-slide {
	margin:0 10px;
}