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

/*背景、文字色、フォントなど   */
body{
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    sans-serif;
    font-size:1rem;
    color: #222;
    background:#fff;
	-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:731px) {
.sp {
    display: none !important;
}
}

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

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

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

#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:730px) {
    #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 .contents-area{
    text-align:center;
    padding:0 auto;
}

/* 背景白 */
#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-area-g{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align:left;
    margin:0 auto;
    padding:1rem auto;
    justify-content: center;
    align-items: flex-start;
    /* 吹き出し背景 */
    background:url(../img/018_back_img.png) no-repeat;
    background-color:#E7E5E6;
    background-position:top 0%;
    background-size:contain;
}

/* 背景グリーン */
#contents .contents-area-gr{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align:left;
    margin:0 auto;
    padding:1rem auto;
    justify-content: center;
    align-items: flex-start;
    /* 吹き出し背景 */
    background:url(../img/018_back_img_2.png) no-repeat;
    /*background-color:#A0D383;*/
    background-position:top 0%;
    background-size:contain;
}

/* flexまとめ用 */
#contents .contents-area-fl{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align:center;
    margin:0 auto;
    justify-content:center;
}

/* 画像サイズ */
#contents img{
    width: 100%;
    max-width: 600px;
}

/* 画像枠（小・20%） */
#contents .contents-img-s{
    margin:1rem 0;
    max-width:300px;
    width:20%;
}
/* 画像枠（大・70%） */
#contents .contents-img-l{
    margin:auto 0;
    text-align:center;
    max-width:500px;
    width:70%;
}
/* 画像枠（中・50%） */
#contents .contents-img-m{
    margin:auto 0;
    max-width:500px;
    width:50%;
    text-align:center;
}
/* 画像枠（中小） */
#contents .contents-img-ms{
    margin:0 auto;
    max-width:200px;
    text-align:center;
}
/* 画像枠（全体表示） */
#contents .contents-img{
    margin:1rem 0.5rem auto 0.5rem;
    max-width:500px;
    width:80%;
}

/* 文章枠（注釈用・枠あり。） */
#contents .contents-text-plus{
    max-width:700px;
    text-align:left;
    margin:1rem;
    padding:1rem;
    font-size:0.9rem;
    border: 1px solid;
    background-color:#eee;
}

/* 文章枠（注釈用・枠なし。グラデーション・グレー上から） */
#contents .contents-text-grad{
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(208, 206, 206, 1));
    width:100vh;
}
/* 文章枠（注釈用・枠なし。グラデーション中身） */
#contents .contents-text-grad-in{
    max-width:730px;
    text-align:left;
    margin:0 auto;
    padding:1rem;
    font-size:0.9rem;
}

/* 文章枠（注釈用・枠なし。グラデーション・ブルーグレー右から） */
#contents .contents-text-bg{
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(187, 228, 240, 1));
    width:100vh;
}

/* 文字色 */
#contents .font-red{
    color:#8B0000;
    font-weight:bold;
}
/* 文字サイズ（小） */
#contents .font-s{
    font-size:0.9rem;
}

/* 黄色マーカー */
#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;
}

/**********************************/
/*システム                       */
/**********************************/

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

/* お問い合わせ飾り用ライン */
.line{
    width:100%;
    margin:0;
    padding:1rem 0;
    text-align:center;
}

.img-line{
    width:100%;
    max-width:1000px;
}

/* システム背景 */
.box-area{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align:left;
    margin:0 auto;
    max-width: 1000px;
    width: 80%;
    justify-content: center;
    /* お問い合わせ背景飾り用 */
    background:url(../img/017_contact_poststamp.png) no-repeat;
    background-position: right 5% top 5%;
}

@media only screen and (max-width: 730px) {
    .box-area{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        text-align:left;
        margin:0 auto;
        width: 95%;
        justify-content: center;
        /* お問い合わせ背景飾り用 */
        background:url(../img/017_contact_poststamp.png) no-repeat;
        background-position: right 5% top 5%;
    }
}

/**********************************/
/*ボタン ここから 	             	*/
/**********************************/

.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;
    text-align:center;
}

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;
}

/**********************************/
/*ボタン ここまで 	             	*/
/**********************************/

/**********************************/
/*ボタン２ ここから                	*/
/**********************************/

.btn-flat-simple {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 1rem;
    text-decoration: none;
    color: #00BCD4;
    background: #ECECEC;
    transition: .4s;
  }
  
  .btn-flat-simple:hover {
    background: #00BCD4;
    color: #ECECEC;
  }

/**********************************/
/*ボタン２ ここまで                	*/
/**********************************/

/**********************************/
/*吹き出し左 ここから 	           	*/
/**********************************/
.balloon2-left {
    position: relative;
    display: inline-block;
    margin: 0 0 0 1rem;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #222;
    font-size: 0.8rem;
    background: #FFF;
    border: solid 1px #222;
    box-sizing: border-box;
    border-radius: 10px;
  }
  
  .balloon2-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
  }
  
  .balloon2-left:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -28px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #222;
    z-index: 1;
  }
  
  .balloon2-left p {
    margin: 0;
    padding: 0;
  }
/**********************************/
/*吹き出し左 ここまで 	           	*/
/**********************************/

/**********************************/
/*吹き出し右 ここから 	           	*/
/**********************************/
.balloon2-right {
    position: relative;
    display: inline-block;
    margin: 0 0 0 1rem;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #222;
    font-size: 0.8rem;
    background: #FFF;
    border: solid 1px #222;
    box-sizing: border-box;
    border-radius: 10px;
}

.balloon2-right:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}

.balloon2-right:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -28px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #222;
    z-index: 1;
}

.balloon2-right p {
    margin: 0;
    padding: 0;
}
/**********************************/
/*吹き出し右 ここまで 	           	*/
/**********************************/

/**********************************/
/*吹き出し左黒 ここから 	       	*/
/**********************************/
.balloon2-left-g {
    position: relative;
    display: inline-block;
    margin: 0 0 0 1rem;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    font-size: 1rem;
    background: #222;
    border: solid 1px #222;
    box-sizing: border-box;
    border-radius: 20px;
  }
  
  .balloon2-left-g:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #222;
    z-index: 2;
  }
  
  .balloon2-left-g:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -28px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #222;
    z-index: 1;
  }
  
  .balloon2-left-g p {
    margin: 0;
    padding: 0;
  }
/**********************************/
/*吹き出し左黒 ここまで 	       	*/
/**********************************/

/**********************************/
/*吹き出し右黒 ここから 	       	*/
/**********************************/
.balloon2-right-g {
    position: relative;
    display: inline-block;
    margin: 0 1rem 0 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #fff;
    font-size: 1rem;
    background: #222;
    border: solid 1px #222;
    box-sizing: border-box;
    border-radius: 20px;
}

.balloon2-right-g:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #222;
    z-index: 2;
}

.balloon2-right-g:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -28px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #222;
    z-index: 1;
}

.balloon2-right-g p {
    margin: 0;
    padding: 0;
}
/**********************************/
/*吹き出し右黒 ここまで 	       	*/
/**********************************/

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

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

/* フッター画像 */
#footer .footer-img{
    width:100%;
    text-align:center;
    border-top:#222;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(208, 206, 206, 1));
    margin:0 auto;
    padding:1rem;
}

/**********************************/
/*パララックス    				   */
/**********************************/
/* 固定 */
.fixed-background {
    min-height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.background-1 {
    background-image: url(../img/101_bgimg01.jpg);
}

.background-2 {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(187, 228, 240, 1));
}

.background-3 {
    background-image: url(../img/101_bgimg04.jpg);
}

/* スクロール */
.scroll-background {
    min-height: 100vh;
    background-attachment:scroll;
    background-size: cover;
    background-position: center;
}

.background-color-1 {
    background-image: url(../img/101_bgimg02.jpg);
}

.background-color-2 {
    background-image: url(../img/101_bgimg03.jpg);
}

.background-color-3 {
    background-color:#E7E5E6;
}

/* 文章枠） */
.parallax-text-700{
    max-width:700px;
    text-align:left;
    margin:0 auto;
    padding:1rem 0rem;
    font-size:0.9rem;
}

/* 文章枠） */
.parallax-text-500{
    max-width:500px;
    text-align:left;
    margin:0 auto;
    padding:1rem 0rem;
    font-size:0.9rem;
}

/* 文字色 */
.font-red{
    color:#8B0000;
    font-weight:bold;
}

/* 画像枠（中小） */
.contents-img-ms{
    margin:0 auto;
    text-align:center;
}