@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: "MyFont";
    src: url(../font/font-main.woff) format("woff"), url(../font/font-sub.woff2) format("woff2");
}
@font-face {
    font-family: "Font-reisho";
    src: url(../font/font-reisho.woff) format("woff"), url(../font/font-reisho.woff2) format("woff2");
}
* {
    box-sizing: border-box;
}
html, body {
    font-family: MyFont, sans-serif;
    color: #231815;
    width: 100%;
    height: 100%;
    z-index: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 30px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
    background: #FDFDFD;
}
.font-main {
    font-family: MyFont, sans-serif;
}
.font-reisho {
    font-family: Font-reisho, sans-serif;
}
.num-kana {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: 500;
    font-size: 90%;
    letter-spacing: 0.1em;
}
img {
    border-radius: 2px
}
.max-left {
    width: 150%;
    margin-left: -50%;
}
.max-right {
    width: 150%;
    margin-right: -50%;
}

@media screen and (max-width:640px) {
.max-left {
    width: 100%;
    margin-left: 0;
}
.max-right {
    width: 100%;
    margin-right: 0;
}
}
.img-r-100 img {
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
    padding: 0 calc((100vw - 100%) / 2);
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
h1, .h1 {
    font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
h1, .h1 {
    font-size: 2.5rem;
    line-height: 3rem
}
}
h2, .h2 {
    font-size: calc(1.325rem + 0.9vw);
    line-height: 2rem
}

@media (min-width: 1200px) {
h2, .h2 {
    font-size: 2rem;
}
}
h3, .h3 {
    font-size: calc(1.3rem + 0.6vw);
    line-height: 2.3rem
}

@media (min-width: 1200px) {
h3, .h3 {
    font-size: 1.75rem;
    line-height: 2.3rem
}
}
h4, .h4 {
    font-size: calc(1.4rem + 0.3vw);
    line-height: 1.8rem
}

@media (min-width: 1200px) {
h4, .h4 {
    font-size: 1.4rem;
}
}
h5, .h5 {
    font-size: 1.2rem;
}
h6, .h6 {
    font-size: 1rem;
}
.h2-space{
    height: auto;
    padding-bottom: 10px;
    margin: 80px 0 40px;
    text-align: center;
}
p {
  margin-top: 0;
 font-size: 1.1rem;
  line-height: 2rem;
}


/* ホバー */
img a {
    transition: 0.3s;
}
img a:hover {
    opacity: 0.5;
}
/* パソコン　改行 */
.pc_inline {
    display: inline
}

@media screen and (max-width:640px) {
.pc_inline {
    display: none
}
}
/* スマホ　改行 */
.sp_inline {
    display: none
}

@media screen and (max-width:640px) {
.sp_inline {
    display: inline
}
}

/* 画像　レスポンシブ */
@media (max-width: 640px) {
.pc {
    display: none !important;
    ;
}
.sp {
    display: block !important;
    ;
}
}

@media (min-width: 641px) {
.pc {
    display: block !important;
    ;
}
.sp {
    display: none !important;
    ;
}
}
/* 影 */
.b-s {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
/*===========
フェイド
===========*/

.fadeIn_up {
    opacity: 0;
    transform: translate(0, 20%);
    transition: 1s;
}
.fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1;
}
/*===========
　 ボタン　
===========*/
.btnarrow5 {
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    border: 1px solid #555;
    padding: 8px 5px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s linear;
    width: 90%;
    background: rgba(255,255,255, 0.9);
    margin-top: -10px
}
.btnarrow5:hover {
    background: #333;
    color: #fff;
}
/*矢印と下線の形状*/
.btnarrow5::before {
    content: "";
    /*絶対配置で下線の位置を決める*/
    position: absolute;
    top: 50%;
    right: -25px;
    /*下線の形状*/
    width: 40px;
    height: 1px;
    background: #333;
    /*アニメーションの指定*/
    transition: all .2s linear;
}
.btnarrow5::after {
    content: "";
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 20%;
    right: -20px;
    /*矢印の形状*/
    width: 1px;
    height: 12px;
    background: #333;
    transform: skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}
/*hoverした際の移動*/
.btnarrow5:hover::before {
    right: -30px;
}
.btnarrow5:hover::after {
    right: -25px;
}



/*きらっと光る*/

.btnshine{
    /*キラッと光る基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/	
	display:inline-block;
    text-decoration: none;
    outline: none;
    overflow: hidden;
}

/*キラッと光る*/
.btnshine::before {
	content: '';
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
    /*キラッと光る形状*/
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
	animation: shine 1.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

/*--- 線から塗り（共通設定） ---*/

.btn05 {
    /*線の基点とするためrelativeを指定*/
    margin-top: 30px;
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    color: #333;
    padding: 10px 20px;
    background: #E8E8E8;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/
    transition: all .3s;
    transition-delay: .7s;/*0.7秒遅れてアニメーション*/
}
/*hoverした際の、ボタンの背景とテキスト色の変更*/
.btn05:hover {
    background: #333;
    color: #fff;
}
/*線の設定*/
.btn05 span {
    display: block;
}
/*横線の設定*/
.btn05::before, .btn05::after {
    content: "";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/   
    width: 0;
    height: 1px;
    background: #333;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}
/*縦線の設定*/
.btn05 span::before, .btn05 span::after {
    content: "";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/
    width: 1px;
    height: 0;
    background: #333;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}
/*hoverした際、線が縦横100%伸びる*/
.btn05:hover::before, .btn05:hover::after {
    width: 100%;
}
.btn05:hover span::before, .btn05:hover span::after {
    height: 100%;
}
/*== 左下⇒右下⇒右上⇒左上⇒左下に枠線が伸びて塗りに */

/*左下から右下へ伸びる横線*/
.bordercircle2::after {
    left: 0;
    bottom: 0;
}
/*右下から上へ伸びる縦線*/
.bordercircle2 span::after {
    right: 0;
    bottom: 0;
    transition-delay: 0.2s;
}
/*右上から左上へ伸びる横線*/
.bordercircle2::before {
    right: 0;
    top: 0;
    transition-delay: 0.4s;
}
/*左上から左下へ伸びる横線*/
.bordercircle2 span::before {
    left: 0;
    top: 0;
    transition-delay: 0.6s;
}
/*===========
　 テーブル　
===========*/

.table-gaiyou {
  margin: 40px 0;
}
.tbl-r01 th {
  padding: 0 10px 0 0;
}
.tbl-r01 td {
　border: solid 1px #F2F2F2;
  color: #3D3D3D;
  font-size: 13px;
  padding: 2px 10px 0 0;
    margin-bottom: 10px;
}
 
@media screen and (max-width: 640px) {
.last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
.tbl-r01 {
    width: 100%;
  }
.tbl-r01 th,
.tbl-r01 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

.tbl-r02 th {
  background: #F2F2F2;
  border: solid 1px #FFFFFF;
  padding: 7px 15px;
}
.tbl-r02 td {
　border: solid 1px #F2F2F2;
  padding: 7px 10px;
}
 
@media screen and (max-width: 640px) {
.last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
.tbl-r02 {
    width: 100%;
  }
.tbl-r02 th,
.tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}