/* ◆ 基本設定 */
html, body, header {
  width: auto;
  margin: 0;			/* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0;			/* 上下左右の余白を0にしておく */
  color: #ffffff;		/* 文字色 */
  background-color: #333333;
}


/* タブレットに適用するCSS */
@media screen and ( min-width:1000px)
{
html, body, header
{
  margin: 0;			/* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0;			/* 上下左右の余白を0にしておく */
}
}


/* タブレットに適用するCSS 縦長 */
@media screen and ( min-width:1000px) and (orientation:portrait)
{
html, body, header
{
  margin: 0;			/* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0;			/* 上下左右の余白を0にしておく */
  overflow: hidden;		/* はみ出た内容:非表示 */
}
}


/* リンク色 */
a:link {
  color: #006bda;
  text-decoration: underline;
  transition: color 0.5s;	/* リンク色（マウスオーバー）が変わる速さ */
}

a:visited {
  color: #551a8b;

}

a:hover {
  text-decoration: none;
  color: #ff1493;
}

a:active {
  color: #ff0000;
  text-decoration: underline;
}


/* ◆ 背景画像指定 */
.bk-img {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden; /* はみ出し防止 */
}

.bk-img::before {
  content: "";
  display: block;
  position: fixed; /* 疑似要素を固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* コンテンツの背後に配置 */
  
  background-image: url(/img/DSC_0020.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ffffff;
}

/* タブレットに適用するCSS */
@media only screen and ( min-width:1000px) 
{
.bk-img
{
  margin: 0 auto;				/* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0;					/* 上下左右の余白を0にしておく */
  color: #ffffff;
  background-image: url(/img/DSC_0020.jpg);	/* 画像ファイルの指定 */
  background-position: center center;		/* 画像を常に天地左右の中央に配置 */
  background-repeat: no-repeat;			/* 画像をタイル状に繰り返し表示しない */
  background-attachment: fixed;			/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-size: cover;			/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-color: #ffffff;			/* 背景画像が読み込まれる前に表示される背景のカラー */
  width: 100%;
  height: 100vh;
}
}

/* タブレットに適用するCSS 縦長 */
@media screen and ( min-width:1000px) and (orientation:portrait)
{
.bk-img
{
  color: #ffffff;
  background-image: url(/img/site-bak.jpg);	/* 画像ファイルの指定 */
  background-position: center center;		/* 画像を常に天地左右の中央に配置 */
  background-repeat: no-repeat;			/* 画像をタイル状に繰り返し表示しない */
  background-attachment: fixed;			/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-size: cover;			/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-color: #ffffff;			/* 背景画像が読み込まれる前に表示される背景のカラー */
	}
}




/* ======================================== */
/* スマートフォン向けスタイル (デフォルト)      */
/* ======================================== */

ol.top-menu-pc {
  position: relative; /* PC版の 'fixed' を解除し、デフォルトの 'relative' に戻す */
  z-index: 9999;
  background: #333333;
  color: #ffffff;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto; /* 中央寄せのために左右autoを設定 */
  padding: 7px 5px;
  list-style-type: none;
  font-size: 100%;
  /* SPでは項目を縦並びにするための設定を追加 */
  display: flex;
  flex-direction: column; /* 項目を縦方向に並べる */
  align-items: center;    /* hakutaka web site を中央寄せ */
  text-align: center;
}

ol.top-menu-pc li {
  margin: 0;
  padding: 5px 0; /* 縦並びなので上下にパディングを設定 */
  /* display: inline を解除 */
  display: block; /* li要素をブロック要素にして縦に積む */
}

ol.top-menu-pc li:first-child {
  padding-left: 0; /* SPでは左寄せの特殊なパディングを解除 */
}

ol.top-menu-pc li a {
  padding-right: 0; /* SPでは右パディングを解除 */
  color: #ffffff;
  transition: color 0.5s;
  display: block; /* リンクエリアを広げる */
}

/* Twitterリンク2か所を非表示にする */
/* 最初のhakutaka web site以外のli要素を非表示にする */
ol.top-menu-pc li:nth-child(n+2) {
  display: none;
}

ol.top-menu-pc li a:hover {
  color: #ff1493;
}


/* ======================================== */
/* PC向けスタイル (min-width: 1000px 以上)  */
/* ======================================== */

@media (min-width: 1000px) {

  ol.top-menu-pc {
    position: fixed; /* PCでのみ固定化 */
    top: 0;
    left: 0;
    /* SP向けで設定した flex-direction や align-items をPC向けに上書き・解除 */
    flex-direction: row; /* 項目を横方向に並べる */
    align-items: flex-start; /* 配置を元に戻す */
    text-align: left;
    margin: 0 0 0 auto; /* 元のmargin設定 */
  }

  ol.top-menu-pc li {
    padding-left: 5px;
    display: inline; /* PCでのみ横並び */
  }

  ol.top-menu-pc li:first-child {
    padding-left: 25px; /* PCでのみ最初の項目に左パディング */
  }

  ol.top-menu-pc li a {
    padding-right: 18px; /* PCでのみ右パディング */
  }

  /* 非表示にしたTwitterリンクをPCでのみ再表示 */
  ol.top-menu-pc li:nth-child(n+2) {
    display: inline; /* 横並びに戻す */
  }
}




/* ◆ 上部メニュー */
@media only screen and ( max-width:999px)
{
ol.top-menu-pc
{
  display: none;
}
}

/* タブレットに適用するCSS */
@media only screen and ( min-width:1000px)
{
ol.top-menu-pc
{
  position: fixed;		/* 固定 */
  top: 0;			/* 固定位置を上部に */
  left: 0;			/* 固定位置を左に */
  z-index: 9999;		/* 重なる要素の上に */
  background: #333333;		/* 背景色 */
  color: #ffffff;		/* 文字色 */
  box-sizing: border-box;	/* サイズ */
  width: 100%;			/* 横幅 */
  margin: 0;			/* マージン（上下左右） */
  padding: 7px 5px;		/* パディング（上下、左右） */
  list-style-type: none;	/* リストマーク非表示 */
  font-size: 100%;		/* 文字サイズ */
}

ol.top-menu-pc li		/* リスト項目 */
{
  margin: 0;			/* マージン（上下左右） */
  padding-left: 5px;		/* 左パディング */
  display: inline;		/* 項目を横並び */
}

ol.top-menu-pc li:first-child 	/* リスト項目（最初の項目） */
{
  padding-left: 25px;		/* 左パディング */
}

ol.top-menu-pc li a		/* リンクエリア */
{
  padding-right: 18px;		/* 右パディング */
}

ol.top-menu-pc li a		/* リンク色 */
{
  color: #ffffff;
  transition: color 0.5s;	/* リンク色（マウスオーバー）が変わる速さ */
}

ol.top-menu-pc li a:hover	/* リンク色（マウスオーバー） */
{
  color: #ff1493;
}
}

/* タブレットに適用するCSS 縦長 */
@media screen and ( min-width:1000px) and (orientation:portrait)
{
ol.top-menu-pc
{
  margin: 0;			/* マージン（上下左右） */
  padding: 7px 5px;		/* パディング（上下、左右） */
  /* background-color: #f9f9f9; */		/* 背景色 */
  list-style-type: none;	/* リストマーク非表示 */
  font-size: 1.2em;		/* 文字サイズ */
}

ol.top-menu-pc li		/* リスト項目 */
{
  padding-left: 5px;		/* 左パディング */
  display: inline;		/* 項目を横並び */
}

ol.top-menu-pc li.first	/* リスト項目（最初の項目） */
{
  padding-left: 5px;		/* 左パディング */
  background: url(/img/y.gif) no-repeat left;	/* ホーム記号（※） */
}

ol.top-menu-pc li a	/* リンクエリア */
{
  padding-right: 18px;	/* 右パディング */
  background: url(/img/y.gif) no-repeat right;	/* 矢印記号（※） */
}

ol.top-menu-pc li a	/* リンク色 */
{
  color: #ffffff;
}

ol.top-menu-pc li a:hover	/* リンク色（マウスオーバー） */
{
  color: #ff1493;
}
}



/* ◆ ハンバーガーメニュー https://rui-log.com/css-hamburger-menu/ */
#nav-drawer {
  position: relative;
}

/* チェックボックス等は非表示に */
.nav-unshown {
  display: none;
}

/* アイコンのスペース */
#nav-open {
  display: inline-block;
  width: 30px;
  height: 25px;
  vertical-align: middle;
  position: fixed;
  background: rgba(255,255,255,0.5);   /* ◆ */
}

/* ハンバーガーの形をCSSで表現 */
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 5px;			/* 線の太さ */
  width: 30px;			/* 長さ */
  border-radius: 4px;
  background: #555555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -10px;
}
#nav-open span:after {
  bottom: -20px;
}

/* パソコンに適用するCSS */
@media only screen and (min-width:1000px)
{
#nav-open, #nav-open span, #nav-open span:before, #nav-open
{
  display: none;
}
}

/* 閉じる用の薄黒箇所 */
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/* メニュー内部 */
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  width: 80%;
  max-width: 330px;	/* 最大幅 */
  height: 100%;
  background: #808080;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

/* チェックがついたら表示させる */
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
  display: flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-direction: row;
  -moz-flex-direction: row;
  -o-flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{
  text-align: center;
  margin: auto;
  background-color: #333333;
  color: #ffffff;
}


/* メニュー内部リスト */
.main-menu{
  list-style: none;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.main-menu li{
  list-style: none;
  width: 100%;
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid #808080;
}
.main-menu li:last-child{
  list-style: none;
  border-bottom: 0px;
}
.main-menu li a{
  list-style: none;
  position: relative;
  display: block;
  margin: 0px;
  padding: 10px;
  background: #333333;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}
.main-menu li a:before{
  list-style: none;
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;	
  right: 35px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #ffffff;
}
.main-menu li a:after{
  list-style: none;
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 40px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #333333;
}



/* ◆ ボタン各種 */
.box {
  border: 1px solid #2ac5b3;
  margin: 10px;			/* マージン（上下左右） */
  padding: 10px;		/* 左パディング */
}



/* ◆ ボタン各種 */
/* button-a */
.button-a a {
  background: #808080;
  /* border-radius: 3px; */
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 280px;
  padding: 10px 25px;
  color: #ffffff;
  transition: 0.5s ease-in-out;
  font-weight: 500;
  border: 1px solid #ffffff;
}

.button-a a:hover {
  background: #333333;
  color: #ff1493;
  border: 1px solid #ffffff;
}

.button-a a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}

.button-a a:hover:after	/* 矢印の色 */
{
  border-color: #ffffff;
}


/* button-b */
.button-b a {
  background: #333333;
  /* border-radius: 3px; */
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 280px;
  padding: 10px 25px;
  color: #ffffff;
  transition: 0.5s ease-in-out;
  font-weight: 500;
  border: 1px solid #ffffff;
}

.button-b a:hover {
  background: #808080;
  color: #ff1493;
  border: 1px solid #ffffff;
}

.button-b a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}

.button-b a:hover:after	/* 矢印の色 */
{
  border-color: #ffffff;
}


/* button-c */
.button-c a {
  background: #808080;
  /* border-radius: 3px; */
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 280px;
  padding: 10px 25px;
  color: #ffffff;
  transition: 0.5s ease-in-out;
  font-weight: 500;
  /* border: 1px solid #ffffff; */
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.button-c a:hover {
  background: #808080;
  color: #ff1493;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.button-c a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}

.button-c a:hover:after	/* 矢印の色 */
{
  border-color: #ffffff;
}


/* button-d */
.button-d a {
  background: #333333;
  /* border-radius: 3px; */
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 280px;
  padding: 10px 25px;
  color: #ffffff;
  transition: 0.5s ease-in-out;
  font-weight: 500;
  /* border: 1px solid #ffffff; */
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.button-d a:hover {
  background: #333333;
  color: #ff1493;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.button-d a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}

.button-d a:hover:after	/* 矢印の色 */
{
  border-color: #ffffff;
}






/* ◆ アコーディオン */
.accordion-item {
  margin-bottom: 10px;
  position: relative;
}

.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.accordion-header .arrow {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.accordion-header .arrow::before {
  content: "\25BC";		/* Unicode for down-pointing triangle (▼) */
}

.accordion-header .arrow.up::before {
  content: "\25B2";		/* Unicode for up-pointing triangle (▲) */
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-content.active {
  display: block;
}

.accordion-content p {
  margin: 0;
}




/* ◆ コピペボックス 【 id指定 】 */
textarea {
  font-size: 0.8rem;
  letter-spacing: 1px;
}

textarea {
  padding: 10px;
  width: 100%;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
}

label {
  display: block;
  margin-bottom: 10px;
}





/* ◆ アコーディン　その2
https://www.omakase.net/blog/2022/05/css-accordion.html */
    .toggle {			   	 /* ベース */
    cursor: pointer;
    	display: none;
  border-left: 3px solid #2ac5b3;
    }
    .Label {				/* タイトル */
    cursor: pointer;
    	padding: 1em;
    	display: block;
    	color: #ffffff;
  border-left: 3px solid #2ac5b3;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
    }
    .Label::before{			/* タイトル横の矢印 */
    	content:"";
    	width: 6px;
    	height: 6px;
    	border-top: 2px solid #ffffff;
    	border-right: 2px solid #ffffff;
    	-webkit-transform: rotate(45deg);
    	position: absolute;
    	top:calc( 50% - 3px );
    	right: 20px;
    	transform: rotate(135deg);
    }
    .Label,
    .content {
    	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
    	transform: translateZ(0);
    	transition: all 0.3s;
    }
    .content {					/* 本文 */
    	height: 0;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	padding: 0 20px;
    	overflow: hidden;
    }
    .toggle:checked + .Label + .content {	/* 開閉時 */
    	height: auto;
    	padding: 20px ;
    	transition: all 0.3s;
    }
    .toggle:checked + .Label::before {
    	transform: rotate(-45deg) !important;
    }