@charset "UTF-8";

/*reset css--------------------*/

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,
improve,
nav,
section,
summary,
time,
mark,
audio,
video,
input,
textarea {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  word-break: break-all;
}

html{/*20260723 追記*/
  scroll-behavior: smooth;
}

body {
  line-height: 1;
  font-family: "Noto Sans",sans-serif;
  color: #222;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
improve,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  background: transparent;
  font-size: 100%;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: baseline;
}

/* change colours to suit your needs */

ins {/*文書を修正する際に、どの部分を追加したのかを示す場合に、該当箇所を<ins>～</ins>で囲んで使用する*/
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */

mark {/*<mark>周囲の文脈での関連性によって参照したり表記したりする目的でマーク付けされたり強調表示されたりするテキストを表します*/
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {/*<del>文書から削除された文字列の範囲を表す*/
  text-decoration: line-through;
}

abbr[title],
dfn[title] {/*このタグは略語や頭字語を表す*/
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */

hr {
  border: 0;
  border-top: 1px solid #cccccc;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
}

input,
select {/*<input>入力欄（フォーム入力）要素と<select>作成したフォームの中でメニュー（セレクトボックス）を作成するためのタグ*/
  vertical-align: middle;
}

html {
  overflow: auto;
}

body {
  overflow: hidden;
}

img {
  width: 100%;
}

/*reset css--------------------*/

/*base--------------------*/

a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

a:hover {
  opacity: 0.8;
}

html {
  -webkit-text-size-adjust: 100%;
}


/*margin-bottom*/
.mb10 {
	margin-bottom: 10px}
.mb20 {
	margin-bottom: 20px}
.mb30 {
	margin-bottom: 30px}
.mb40 {
	margin-bottom: 40px}
.mb60 {
	margin-bottom: 60px}
.mb80 {
	margin-bottom: 80px;}
.mb1em {
	margin-bottom: 1em;}
.mb2em {
	margin-bottom: 2em;}

/*margin-top*/
.mt10 {
	margin-top: 10px;}
.mt20 {
	margin-top: 20px;}
.mt30 {
	margin-top: 30px;}
.mt40 {
	margin-top: 40px;}
.mt60 {
	margin-top: 60px;}
.mt80 {
	margin-top: 80px;}
.mt1em {
	margin-top: 1em;}
.mt2em {
	margin-top: 2em;}

/*margin-right*/
.mr10 {
	margin-right: 10px;}
.mr20 {
	margin-right: 20px;}
.mr30 {
	margin-right: 30px;}

/*padding-bottom*/
.pb10 {
	padding-bottom: 10px;}
.pb20 {
	padding-bottom: 20px;}
.pb30 {
	padding-bottom: 30px;}
.pb40 {
	padding-bottom: 40px;}
.pb60 {
	padding-bottom: 60px;}
.pb80 {
	padding-bottom: 80px;}
.pb1em {
	padding-bottom: 1em;}
.pb2em {
	padding-bottom: 2em;}

/*position*/
.alignL {
	text-align: left;}
.alignC {
	text-align: center;}
.alignR {
	text-align: right;}

/*base--------------------*/

/*common--------------------*/

.contents{
  width: 64%;
  margin: 0 auto;
  padding: 8rem 0;
  line-height: 1.8;
}

.caution{
  color: #ff0000;
  font-family: "Noto Sans",sans-serif;
  font-size: .8rem;
}

.sp{
  display: none;
}

.pc{
  /*display: block;*/
  display: inline-block;/*20261001 修正*/
}

.txt_sans{
  font-family: "Noto Sans",sans-serif;
}

.l_space{
  padding-left: 1em;
}

.center{
  text-align: center;
}

@media (max-width: 1280px) {/*タブレットで分岐*/
  .tab{
  display: inline-block;
}

.contents{
  width: 88%;
}

}

/*スマホの時のみ電話かかる　ここから*/
@media screen and (min-width: 768px){
a[href*="tel:"] {
    pointer-events: none; /*①アンカーのtelを無効化*/
    cursor: default; /*②アンカーのポインターをデフォルトにする*/
    text-decoration: none;
}
}
/*スマホの時のみ電話かかる　ここまで*/

@media (max-width: 767px) {

  .contents{
  width: 80%;
  /*padding: .5rem 0;*/
  padding: .5rem 0 1.8rem 0;
  line-height: 1.6;
}

.caution{
  font-size: .6rem;
  margin-top: .4rem;
}



.sp{
  display:block;
}

.pc{
  display: none;
}

.l_space{
  padding-left: 0;
}

}

/*00000000
下から上にフェードイン（テキスト）
00000000*/

/* ――― アニメーションCSS ――― */

        /* 1. 初期状態（アニメーションが始まる前）の設定 */
        .fade-up-text {
            /*font-size: 2rem;
            font-weight: 300;
            letter-spacing: 0.15em;
            color: #333;*/
            
            opacity: 0;               /* 最初は透明にする */
            transform: translateY(30px); /* 最初は少し下にずらしておく */
            transition: opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1), 
                        transform 2s cubic-bezier(0.25, 1, 0.5, 1); 
            /* 2秒かけて滑らかに変化させる */
        }

        /* 2. JavaScriptによってクラス「is-visible」がついた時の設定（完了状態） */
        .fade-up-text.is-visible {
            opacity: 1;               /* 不透明度を1にして表示 */
            transform: translateY(0);    /* 元の（正しい）位置に戻す */
        }

/*common--------------------*/

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

header{
  width: 100%;
  margin: 0 auto;
}

.head_logo{
  width: 12%;
  padding: 16px 0 16px 24px;
}

/*PC用とSP用の画像が両方出てしまう対策　ここから*/

/* 画像を囲むコンテナ */
.mv {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/*PC用とSP用の画像が両方出てしまう対策　ここまで*/

/*00000000
ぼかしからくっきりフェードイン（MV）
00000000*/

/* 画像を囲むコンテナ（枠）の設定 */

        /* 画像自体の設定 */
        .blur-img {
            display: block;     /* 画像の下にできる謎の隙間を消す */
            width: 100%;        /* コンテナの幅に合わせる */
            height: auto;       /* 縦横比（アスペクト比）を維持 */
            
            /* アニメーション：1.5秒かけて、徐々に変化（ease-out）、最後に静止（forwards） */
            animation: blurToClear 1.5s ease-out forwards;
        }

        /* キーフレーム（アニメーションの具体的な動き） */
        @keyframes blurToClear {
            0% {
                filter: blur(15px); /* スタート時のぼかし具合 */
                transform: scale(1.05); /* ぼかしによる周囲の透過（白モヤ）を隠すために少し拡大 */
                opacity: 0;         /* 最初は透明からスタート（徐々に現れるように） */
            }
            100% {
                filter: blur(0px);  /* ぼかしを完全に無くす */
                transform: scale(1); /* 元のサイズ（100%）に戻す */
                opacity: 1;         /* 完全に表示 */
            }
        }

@media (max-width: 1280px) {/*タブレットで分岐*/
  .head_logo{
    width: 24%;
  }
}        

@media (max-width: 767px) {
  .head_logo{
    width:24%;
    padding: 8px 0 8px 16px;
  }
}