@charset "utf-8";
/*--------------------------------------------------------------------

ブレイクpoint　1100px
font-size 320-560

--------------------------------------------------------------------*/	
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   font-style: normal; list-style: none; font-weight: 400; 
  font-optical-sizing: auto;}

  
.movie_blk {
    width: 100%;
    height: 100vh;
    position:fixed;
}
.movie_blk video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left:0;
}

  
a{text-decoration: none; color:#82703e ; transition: 0.3s}
a:hover{ color:#3b3b3b; }
a.blink{background:#cebc8a; padding: 2px 10px 0 ; display: inline-block ; line-height: 1.1; border-radius: 5px}
img{max-width: 100%; height: auto ;vertical-align: bottom; }

body{color: #3b3b3b;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal; background: #f7f7f7
}
.goshi{  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal; }
.min{   font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;}
.en{  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;}
.imp{font-weight: 500}
.red{color: #f6213f}
.pink{color: #e29898}
.bggold{background:#afa68f !important }
.green{color:#728d6e }

.tate { -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      text-orientation: upright; }

.line{ display: inline ; background: linear-gradient(transparent 50%, rgba(252, 248, 191, 1) 50%); font-weight: 700}
.line2{ display: inline ; background: linear-gradient(transparent 50%, rgba(234, 238, 233, 1) 50%); }
.kagi {
  position: relative;
  padding: 8px 16px;
  letter-spacing: 0.1em;
  display: inline-block;
  box-sizing: border-box;
  max-width: 500px;
  text-align: center; 
  margin: 0 auto;
  margin-inline: auto; font-size: clamp(1.625rem, 1.042rem + 2.92vw, 2.063rem)}/*26-33*/

.kagi::before, .kagi::after {
  content:'';
  position: absolute;
  width: 30px;
  height: 30px;
}

.kagi::before {
  border-left: solid 1px #3b3b3b;
  border-top: solid 1px #3b3b3b;
  top:0;
  left: 0;
}

.kagi::after {
  border-right: solid 1px #3b3b3b;
  border-bottom: solid 1px #3b3b3b;
  bottom:0;
  right: 0;
}

.kagi span:before, .kagi span:after {
  content:'';
  position: absolute;
  width: 46px;
  height: 46px;
  rotate: 45deg;
}

.kagi span:before {
  border-left: solid 1px #3b3b3b;
  top:2px;
  left: 2px;
}

.kagi span:after {
  border-right: solid 1px #3b3b3b;
  bottom:2px;
  right: 2px;
}
.waku{
  position: relative;
  box-sizing: border-box;
  text-align: center; 
}

.waku::before {border-radius: 10px;
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 100%;
  height: 100%;
  outline: 1px solid #81997e;
}

.line-border{
    display: flex;
    align-items: center;
}
.line-border img{width:21px }
.line-border:before,
.line-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}

.line-border:before {
    margin-right: 1rem;
}

.line-border:after {
    margin-left: 1rem;
}


/* アニメ　*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*--------------------------------------------------------------------

フェードイン
--------------------------------------------------------------------*/
.fade-in {
    animation-name: fadeIn; animation-duration:3s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0,-20%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,20%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
.fadeInUp {
    animation-name: fadeInUp; animation-duration:3s;
}


@keyframes kira1 {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2); opacity: 0.5; }
}
.kira1 {
  animation: kira1 2s infinite;
  display: block;
}
@keyframes kira2 {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}
.kira2 {
  animation: kira2 1s infinite;
  display: block;
}

/* コンテナ */
.btn-wrap {
  text-align: center;
  margin: 2em 0;
}

/* 枠付きボタン＋右矢印 */
.arrow-btn-outline {box-shadow: 0 0 8px #d0dbcf;
  --btn-color: #82703e;
  position: relative;
  display: inline-block;
  min-width: min(240px, 100%);
  padding:15px 0;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  color: var(--btn-color);
  border: 1px solid var(--btn-color);
  background: none;
  transition: background-color .2s, color .2s;
}

/* 右矢印 */
.arrow-btn-outline::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 40px;
  height: 8px;

  transform: translateY(-50%) skewX(50deg) translateX(0);
  border: solid 1px currentColor;
  border-top: 0;
  border-left: 0;
  transition: transform .2s ease, border-color .2s ease;
}

/* hover時：矢印スライド */
.arrow-btn-outline:hover::after {
  transform: translateY(-50%) skewX(50deg) translateX(5px);
  border-color: var(--btn-color);
}
.arrow-btn-outline:hover{box-shadow: none}



body{ line-height:1.8; font-size:clamp(1rem, 0.917rem + 0.42vw, 1.063rem)}/*16-17*/

.contBoxFlaxr{ position: relative; z-index: 1}
.contBoxFlaxr .maincont{margin: 0px auto 0; max-width: 500px;}

.pager {
    margin: 50px 3%;
    max-width: 1100px;
}
.pager:after, .pager ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.pager a{ display:inline-block;
    float: left;
    list-style: none outside none;
    margin-left: 3px;
	margin-bottom:5px;
	background:url("../img/bg.png") repeat;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 10px 20px;  
}
.pager a:first-child {
    margin-left: 0;
}
.pager span{display:inline-block;
    float: left;
    list-style: none outside none;
    margin-left: 3px;
	margin-bottom:5px;
	background-color: #c0c0c0;
    border-radius: 3px;
    color: #FFFFFF;
    padding: 10px 20px;}

.pager a:hover {
    background-color: #ffe4df;
    color: #FFFFFF;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease;
}	

.pagernav{font-size: 10px; padding-bottom: 40px }
.pagernav li{display: inline-block; margin-right: 5px}

/*固定ページ*/
.firstkotei .kiji{ background: url("../img/bg.png") repeat ; background-size: 150px; color: #fff; padding: 60px 0 ;}
.firstkotei .kiji h2{text-align: left; margin-left: 8%; line-height: 1.4; margin-right: 2%; font-size:clamp(1.625rem, 1.292rem + 1.67vw, 1.875rem)}/*26-30*/
.firstkotei .kijiBox{padding: 60px 0}

.blogbox .kijiBox{font-size: 15px}

.kijiBox{margin: 0 8% }
.kijiBox .cont8{padding: 0 5% 50px}
.kijiBox hr.nizyu {
  position: relative;
  border: none;
  border-top: 1px solid #749070;
  height: 3px; /* 線の間隔 */
  margin: 20px 0;
}

.kijiBox hr.nizyu::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 2px solid #749070;
}

.kijiBox .hh1{margin-bottom: 20px; position: relative;
 line-height: 1.3;
  padding: 20px 10px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  background:url("../img/bg.png") repeat;
}

.kijiBox .hh1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #749070;
}


.kijiBox .hh2{margin-bottom: 15px; padding: .5em .7em;font-weight: 600; line-height: 1.3; 
    border: 2px solid #749070;
    box-shadow: 5px 5px #749070;
    color:#749070; background: #fff}
    
.kijiBox .hh3{margin-bottom: 45px;
 position: relative; text-align: left;
  padding: 12px 16px 12px 30px;
}
.kijiBox .hh3::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 100px;
  height: 1px;
  transform: rotate(-14deg);
  box-sizing: border-box;
  background-color: #242424;
}
.kijiBox .hh3::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 120px;
  height: 1px;
  transform: rotate(14deg);
  box-sizing: border-box;
  background-color: #242424;
}
.kijiBox .hh3 > .ornament {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.kijiBox .hh3 > .ornament::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 160px;
  height: 1px;
  transform: rotate(-12deg);
  box-sizing: border-box;
  background-color: #242424;
}
.kijiBox .hh3 > .ornament::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 160px;
  height: 1px;
  transform: rotate(12deg);
  box-sizing: border-box;
  background-color: #242424;
}  

.kijiBox .hh4{margin-bottom: 15px;
    position: relative;
    padding: .7em 1.3em;
    color: #749070; display: inline-block
}

.kijiBox .hh4::before,
.kijiBox .hh4::after {
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    content: '';
}

.kijiBox .hh4::before {
    top: 0;
    left: 0;
    border-top: 3px solid #749070;
    border-left: 3px solid #749070;
}

.kijiBox .hh4::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid #749070;
    border-right: 3px solid #749070;
}


.kijiBox .style3b {margin-bottom: 15px; padding:1.1em .9em 1em; border-top:2px solid #749070; border-bottom:1px solid #ddd; background:#fafafa; box-shadow:0px 1px 2px #f7f7f7; }
.kijiBox .style4a {margin-bottom: 15px; color:#749070 ; padding:.3em 0 .3em .8em; border-bottom:none; border-left:2px solid #749070; }
.kijiBox .style5b {margin-bottom: 15px;  padding:.5em .8em .4em 1em; color:#fff; background:url("../img/bg.png") repeat; border-radius:4px; box-shadow:0px 2px 0px 0px #f2f2f2; }

.kijiBox .balloon { position:relative; display:block; margin:0px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left; background:url("../img/bg.png") repeat; z-index:0; border-bottom:0; }
.kijiBox .balloon:after { content:""; position:absolute; bottom:-10px; left:30px; margin-left:-10px; display:block; width:0px; height:0px; border-style:solid; border-width:10px 10px 0 10px; border-color:#749070 transparent transparent transparent; }

.kijiBox .well0{background:#e8e4dd; padding: 20px; border-radius: 10px }
.kijiBox .well { background-color:#fff; min-height:20px; padding:19px; border:1px solid #e3e3e3; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05); box-shadow:inset 0 1px 1px rgba(0,0,0,0.05); }
.kijiBox .well2 {padding:1em 1.5em; line-height:2; border:1px dashed #749070; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); }
.kijiBox .wel3{
	padding:1em 1.5em;
	 color:#fff; background:url("../img/bg.png") repeat;
	position:relative;
}
.kijiBox .wel3:after{
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: #f1eee8 #f1eee8 #e2d6ca;
}

.kijiBox .waku20 {
  position: relative;
  border-bottom: 1px solid #749070;
  padding: 20px;
  padding-top: 24px; /* 二重線のスペース分 */
}

.kijiBox .waku20::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 2px solid #749070;
}

.kijiBox .waku20::after {
  content: '';
  position: absolute;
  top: 3px; /* 線の間隔 */
  left: 0;
  right: 0;
  border-top: 1px solid #749070;
}


.kijiBox a.q_button{display: block; box-shadow: 0 0 8px #80747d; padding:15px 20px; border-radius:10px; background:url("../img/bg.png") repeat; color:#fff !important} 
.kijiBox a.q_button:hover{ box-shadow: none} 

.kijiBox .youtubea{position: relative;
height: 0;
margin: 0px 0 10px;
padding: 30px 0 56.25%;
overflow: hidden;
}

.kijiBox .youtubea iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.youtube-shorts {
    position: relative;
    width: 100%;
    max-width: 315px;
    margin: 0 auto;
}

.youtube-shorts iframe {
    width: 100%;
    height: 560px;
}
.kijiBox ul.service-price li{list-style: disc; margin-left: 20px; line-height: 1.4; margin-bottom: 10px}
.kijiBox ul li{list-style: disc; margin-left: 20px; line-height: 1.7; margin-bottom: 10px}
.kijiBox .f-ser ul li{list-style: none}

.kijiBox .soudanBox ul li{margin-left: 0}

.kijiBox ol li{list-style-type: decimal; margin-left: 20px; line-height: 1.7; margin-bottom: 10px}


.kijiBox table,.kijiBox td,.kijiBox th {
    border-collapse: collapse;
    border:1px solid #eae4e4;
    padding: 10px 
    }

.kijiBox strong{font-weight: 800}


/* プロフィールカード全体の枠組み */
.author-profile-card {
  border: 1px solid #e8e4e1; /* 枠線の色（薄いベージュ系） */
  border-radius: 8px; /* 角丸 */
  padding: 24px;
  background-color: #faf9f8; /* 背景色（ごく薄いグレーベージュ） */
  color: #4a4a4a;
  max-width: 800px;
  margin: 2em auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* 軽い影で立体感を出す */
}

/* 「この記事の執筆・監修者」ラベル */
.author-label {
  display: inline-block;
  background-color: #749070; /* ラベルの背景色（上品なモカ・ベージュ系） */
  color: #fff;
  font-size: 0.85em;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
  letter-spacing: 0.05em;
}

/* 画像とテキストのレイアウト（PC用） */
.author-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* 画像の装飾 */
.author-image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%; /* きれいな丸抜き */
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.author-info {
  flex: 1;
}

/* 名前と肩書き */
.author-name {
  font-size: 1.25em;
  margin: 0 0 14px 0;
  color: #333;
  border-bottom: 1px solid #e8e4e1;
  padding-bottom: 10px;
}

.author-title {
  display: block;
    font-size: 11px;
    line-height: 1.4;
  color: #888;
  font-weight: normal;
  margin-top: 6px;
}

/* 資格・経歴リスト */
.author-credentials {
  font-size: 0.9em;
  margin-bottom: 16px;
}

.credentials-title {
  margin: 20px 0 8px 0;
  font-weight: bold;
  color: #666;
}

.author-credentials ul {
  margin: 0;
  padding-left: 0px;
  color: #555;
  line-height: 1.6;
}

/* メッセージ部分の装飾 */
.author-message {
  font-size: 0.9em;
  line-height: 1.6;
  background: #fff;
  padding: 14px 18px;
  border-radius: 6px;
  border-left: 4px solid #749070; /* 左側にアクセントライン */
  margin-bottom: 18px;
  color: #555;
}

.author-message p {
  margin: 0;
}

/* リンクボタン風テキスト */
.author-link {
  display: inline-block;
  color: #749070;
  text-decoration: none;
  font-size: 0.95em;
  font-weight: bold;
  transition: opacity 0.3s ease;
}

.author-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}






.priv{font-weight: 500; text-align: right; color: #fff; margin: 80px 5% 0 0 ; font-size: clamp(0.813rem, 0.625rem + 0.94vw, 1rem)}/*13-16*/
.priv a{ display: block; margin-bottom: 5px; color: #000}
.priv a:hover{color: #749070}


/* サブメニュー用のスタイル */
.globalMenuSp .f-ser ul ul {
    padding-left: 20px;
    margin-top: 5px;
}

.globalMenuSp .f-ser ul ul li {
    font-size: 14px;
}

.globalMenuSp .f-ser ul ul li a {
    padding: 0px 0 2px; border: none
}

/* サブメニューを持つ項目のインジケーター */
.has-submenu > a::after {
    content: "▼";
    font-size: 10px;
    margin-left: 8px;
    transition: transform 0.3s;
    display: inline-block;
}

.has-submenu.submenu-open > a::after {
    transform: rotate(180deg);
}

.contfoot{padding: 60px 8% 0; background:#f7f7f7; text-align: center}
.contfoot h3{ color:#b09e68; margin-bottom: 30px; line-height: 1.4}
.contfoot .kagi::before {
  border-left: solid 1px #b09e68;
  border-top: solid 1px #b09e68;
}
.contfoot .kagi::after {
  border-right: solid 1px #b09e68;
  border-bottom: solid 1px #b09e68;
}
.contfoot .kagi span:before {
  border-left: solid 1px #b09e68;
}
.contfoot .kagi span:after {
  border-right: solid 1px #b09e68;
}

.contfoot .job{margin: 40px 0 60px}
.contfoot a.kage{filter: drop-shadow(0px 0px 5px rgba(129, 153, 127, 0.7));}
.contfoot a.kage:hover{filter: none;}
.contfoot .column{position: relative; border: 1px solid #b09e68; margin: 40px 0; color:#b09e68; border-radius: 860px 860px 10px 10px; padding: 70px 8% 30px}
.contfoot .column li{line-height: 1.4; margin-bottom: 10px; text-align: left; position: relative; padding-left: 15px; font-size:clamp(0.875rem, 0.792rem + 0.42vw, 0.938rem) }/*14-15*/
.contfoot .column li:after{ content:"+"; display: block; left: 0; top: 0; position: absolute}
.contfoot .column .hosi1{position: absolute; right: 10%; top: 60px ; width:23px }
.contfoot .column .hosi2{position: absolute; right: 5%; top: 90px; width:15px }

footer {padding: 50px 0; color: #fff; text-align: center; background: url("../img/bg.png") repeat}

footer .elBox{text-align: center; background: url( "../img/top/f_elle.png") no-repeat center top; background-size: contain }
footer .elBox span{display: block ; font-size:clamp(1.5rem, 0.583rem + 4.58vw, 2.188rem) }/*24-35*/
footer .zyusyo , footer .zyusyo2{font-size:clamp(0.75rem, 0.5rem + 1.25vw, 0.938rem) }/*12-15*/
footer .zyusyo span{font-size:clamp(0.688rem, 0.521rem + 0.83vw, 0.813rem) }/*11-13*/
footer .zyusyo {margin-top: 10px; margin-bottom:10px; text-align: center}
footer .zyusyo2{padding-bottom: 20px}
footer .zyusyo img{width: 30px; margin-top: 10px}
footer .eigyo{font-size:clamp(0.75rem, 0.5rem + 1.25vw, 0.938rem) }/*12-15*/

footer .elBox .text02 img{width: 70%}

footer .f-ser {text-align: left; padding: 50px 8% 10px; font-family: "Noto Sans JP", sans-serif; background:url("../img/bg.png") repeat; color: #fff ; font-size: 17px  }
footer .f-ser a{color: #fff; display: block; border-bottom: 1px dashed #fff; margin-bottom: 5px; padding-bottom: 5px}
footer .f-ser .borno{padding-top: 5px}
footer .f-ser .clummenu{margin-top: -5px; border-bottom: 1px dashed #fff; padding-bottom: 10px}
footer .f-ser .borno a{border: none}
footer .f-ser .bono a{border: none}

footer .pori{padding: 10px 0}
footer a.privacy{border: none ; display: inline-block; padding-right: 20px; margin-right: 10px}
footer .f-ser ul ul{margin-bottom: 10px}
footer .f-ser ul ul li{font-size: 13px ; list-style: circle; color: #fff; margin-left: 20px;}
footer .f-ser ul ul li a { padding: 2px;  border: none}

footer .toppage a{border: none; border-bottom: 20px; text-align: center}
footer .en{font-size: 13px; margin-bottom: 5px}
footer a:hover{opacity: 0.5 }


.copy{padding:0px 0 120px; text-align: center; font-size: 12px; }









@media screen and (max-width: 1099px) {
.smtno{display: none !important}
.contBoxFlaxl{display: none}

header {max-width: 560px; margin: 0 auto}
.headl{line-height: 1.4; padding: 20px 0 20px 5%; position: relative}
.headl a{color:#3b3b3b; display: block; width: 55%; position: relative ; max-width:275px }
.headl h1{z-index: 1; letter-spacing: -1px; text-align: right; position: absolute; top: 10px; left:41px; font-size: clamp(0.688rem, 0.521rem + 0.83vw, 0.813rem)}/*11-13*/
.headl h1 span{color: #f7f7f7}
.headl .access2 a{
border: solid 1px #fff;
outline: solid 1px #749070;
z-index: 5; position: absolute; top: 15px; left: 62%;line-height: 1.4; border-radius: 5px; background: url("../img/bg.png") repeat; display: block; width: 60px; min-height: 60px;padding: 8px 0 5px; box-sizing: border-box; color: #fff; text-align: center; font-size:clamp(0.625rem, 0.443rem + 0.91vw, 0.75rem) }/*10-12*/
.headl .access2 img{width: 12px; margin-bottom: 4px}
.headl .access2 a:hover{box-shadow:none}

.contBoxFlaxr .maintitle{text-align: center; color: #FFFFFF}
.contBoxFlaxr .maintitle img{width: 487px; max-width: 80%; }


/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 9000;
  right :-80px;
  top   : -80px;
  width :160px;
  height: 160px;
  cursor: pointer;
  text-align: center;
  background: url("../img/bg.png") repeat; border-radius:0 0 0 70px;
}
.hamburger:hover{box-shadow:none}
.hamburger:after{  content: "Memu"; color: #FFF; font-size: 11px; font-style: normal; position: absolute; bottom: 50px; left:20%}
.hamburger p{    height: 160px;
    border: 1px solid;
    width: 160px;
    position: relative;}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left: 20%;
  background : #fff; border-radius: 2px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  bottom: 34px;
}
.hamburger span:nth-child(2) {
  bottom: 40px;
  animation-delay: 0.33s;
}
.hamburger span:nth-child(3) {
  bottom: 46px;
}
/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
 transform: translate(0, 10px) rotate(-45deg); animation: unset;
}

.hamburger.active span:nth-child(2){
animation: unset;opacity: 0; 
}
.hamburger.active span:nth-child(3) {
  transform: translate(0, -10px) rotate(45deg);
  animation: unset;bottom: 14px;
}

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 1000;
  top  : 0;
  left : 0;
  color: #fff;
  height:100vh;
  background:url("../img/bg.png") repeat;
  width: 100%;
/*  transform: scale(0,0);*/
transform: translateX(100%);
  transition: all 0.6s;
  align-items: center;
  justify-content: center;
}
/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
  transform: translateX(0);
 transform: scale(1,1);
}



.globalMenuSp .f-ser {text-align: left; padding: 50px 8%; color: #fff }
.globalMenuSp .f-ser a{color: #fff; display: block; border-bottom: 1px dashed #fff; margin-bottom: 8px; padding-bottom: 5px}
.globalMenuSp .f-ser .bono a{border: none}
.globalMenuSp a.privacy{border: none}
.globalMenuSp .toppage a{border: none; border-bottom: 10px; text-align: center}
.globalMenuSp .en{font-size: 13px; margin-bottom: 5px}
.globalMenuSp a:hover{opacity: 0.5 }



.kotei{display: flex; justify-content: space-between;  margin: 0 auto;
  position: fixed; line-height: 1;
  bottom: 0px; 
  color: #fff;
  cursor: pointer;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
  z-index: 88; text-align: center; width: 100%; max-width: 500px;
    transform: translateY(100%); /* 下に隠す */
  transition: all 0.4s ease-in-out; /* スムーズなアニメーション */
  /* ▼ 追加: 左右を0にして引っ張り合わせる */
  left: 0;
  right: 0;
  
}
.kotei a{color: #fff; display: block ; text-align: center; background:#a39b87; transition: .3s; 
position: relative; border-radius: 10px 10px 0 0; box-shadow: 0 0 8px #749070; font-size: clamp(0.875rem, 0.708rem + 0.83vw, 1rem) }/*14-16*/

.kotei li{ margin-left: 3%; letter-spacing: 1px; width: 75% ;  border-radius: 10px ;line-height: 1.5; font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem)}/*16-20*/
.kotei li a{padding: 14px 0 10px; min-height: 50px}
.kotei li:last-child{width: 20%; margin: 0 3%  }
.kotei li:hover a{ box-shadow: none}
.kotei li img{width: 14px; vertical-align: middle; position: relative; top: -2px}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible; transform: translateY(0); /* 元の位置に戻す */
}


.copy{padding-bottom: 130px}
.cpp{padding: 50px 0 80px; text-align: center}
.cont-right{display: none}

}
@media screen and (min-width: 480px) {
.headl h1{left: 25%}

}

@media screen and (min-width: 1100px) {


.contBoxFlax{width: 100%; position: absolute; display: flex}
.contBoxFlaxl{width: 35%; text-align: center; position: fixed; height: 100vh; z-index: 1; }
.contBoxFlaxl .hbox{text-align: left; position: absolute; bottom: 10%; width: 80%; padding:0 5% 0 10% }
.contBoxFlaxl .hbox .hboxin{position: relative; margin-bottom: 15px; }
.contBoxFlaxl .hbox .hboxin .adl{position: absolute ; top: 15px; left: 14%; font-size: 15px; }

.contBoxFlaxl .hbox .hboxin a.mapp{display: block; position: absolute; right:5%; top: 2%; color: #fff; background:url("../img/bg.png") repeat; border-radius:31px 31px 10px 10px ; font-size: 12px; padding: 10px; line-height: 1.3 ; z-index: 8; text-align: center ; border:double;}
.contBoxFlaxl .hbox .hboxin a.mapp img{width:15px; margin-bottom: 5px }
.contBoxFlaxl .hbox .hboxin .jlog{max-width: 70%}
.contBoxFlaxr{padding-top: 0px; width:65%; margin-left: 35%; position: relative; z-index: 3;}/*メインコンテンツ*/
.contBoxFlaxr .maincont{width: 500px; margin: 0 0 auto 0; }

#freekiji{padding-top: 30px}
.cont-right{color:#749070 ; position: fixed; left: 3%; top: 0px; padding-top: 50px; width: 18%; height: 100vh; z-index: 10; }
.cont-right .tate{ font-size:14px}
.cont-right .min{ font-size:clamp(1.25rem, -1.5rem + 4vw, 2rem)}/*20-32 1100-1400*/

.cont-right .soudanBox{background:none; color:#749070 ; padding: 0; position: absolute; bottom: 10%}
.cont-right .soudanBox .text{font-size:clamp(0.875rem, -0.5rem + 2vw, 1.25rem)}/*14-20 1100-1400*/
.cont-right .soudanBox h2{text-shadow:none ; margin-top: -5px; font-size:clamp(1.25rem, -0.125rem + 2vw, 1.625rem)}/*20-26*/
.cont-right .soudanBox li img{vertical-align: middle}
.cont-right .soudanBox li:last-child img{width:100%;}
.cont-right .soudanBox .att{text-shadow:none ; }


.pcno{display: none !important}

.headl {display: none}

#wrap{position: relative; width: 100%}
.headr {background-image: url("../img/text.png"), url("../img/bg.png"); 
background-repeat:no-repeat, repeat;
background-size: 130px 404px ,150px 150px;
background-position:bottom right, top right;
position: fixed; right: 0; height: 100vh; z-index: 55;
        width: calc(100% - 35% - 500px);
        padding: 50px 3% 0 3%;
        box-sizing: border-box; font-size:clamp(0.813rem, 0.718rem + 0.27vw, 0.938rem) }/*13-15 560-1300*/
    
    .headr .f-ser {
        text-align: left;
        padding: 0;
        font-family: "Noto Sans JP", sans-serif;
        background: transparent;
        color: #3b3b3b;
    }
    
    .headr .f-ser a {
        display: block; color: #fff;
        padding-bottom: 7px;
        border: none;
    }
    
    .headr .f-ser a:hover {
        color: #a39a88;
    }
.globalMenuSp .f-ser ul ul li{font-size: 13px ; list-style: circle; color: #fff;}
.globalMenuSp .f-ser ul ul li a { padding: 2px;}

.has-submenu{margin-bottom: 5px}
.headr .citbbt{margin-top: 20px}
.headr .citbbt img{width: 20px; vertical-align: middle}

.copy{ padding-bottom: 30px}


}



@media screen and (min-width: 1200px) {
.contBoxFlaxl{width: 37%}
.contBoxFlaxr{width:63%; margin-left: 37%; }
.headr{width: calc(100% - 37% - 500px);}
}
@media screen and (min-width: 1491px) {
.contBoxFlaxl{width: 45%}
.contBoxFlaxl .hbox{max-width:500px }
.contBoxFlaxr{width:55%; margin-left:45%; }
.headr{width: calc(100% - 45% - 500px);}
}