@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/*-------------------------------------------*/

.pconly{

	display: block;
}

.sponly{

	display: none;
}

.pconly_btn{
		display: block;
	}

/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/




/*========= 背景動画設定のCSS ===============*/


.center {
	text-align: center;
}


/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/
/**********************************************/

/************************************************/
/**********************************************/
/**********************************************/


/**********************************************/

/**********************************************/

/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/


/*-------------------------------------------*/

/*-------------------------------------------*/










/***************************************************/

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/

#footer {
	width: 100%;
	margin: 0px auto 0 auto;
	color: #ffffff;
	font-size: 13px;
	letter-spacing: 5px;
	padding-top: 20px;
	padding-bottom: 5px;
	background: #000000;
	background: url(../../../../image/member/project_s/ex_kaiseki_all/gold.gif) #000 top center repeat-x;
	box-shadow: 0 0 3px 2px #FEE463, 0 0 20px 1px #FFEFA0;
	position: relative;
	z-index: 1100;
}

.top a {
	width: 120px;
	margin: 10px 20px 10px 20px;
	color: #ffffff;
	text-align: center;
}

.top a:hover {
	width: 120px;
	color: #ff4500;
	text-align: center;
}

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
.form_ifm2 {
	width: 100%;
	font-size: 20px;
	padding: 1rem;
}

.formarea {
	margin-top: 0;
	margin-bottom: 1%;
	margin-left: 1%;
	margin-right: 1%;
	background-color: #c2c2c2;
	background-image: url("https://www.transparenttextures.com/patterns/fresh-snow.png");
	padding: 2%;
	border: 2px solid #000;
}

.formarea_top {
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	background-color: #1f1f1f;
	padding: 2%;
	text-align: center;
	border: 2px solid #000;
}


/*-------------------------------------------*/
button {
	cursor: pointer;
}

/*-------------------------------------------*/
/*-------------------------------------------*/

input[type="radio"] {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	margin-right: 0.2em;
	cursor: pointer;
}

input[type="radio"]+label {
	width: 80%;
	font-weight: bold;
	cursor: pointer;
	background: #afafaf;
	border-radius: 1rem;
	padding: 1rem 1.5rem 1rem 0;
}

input[type="radio"]+label:hover {
	font-weight: bold;
	cursor: pointer;
	background: #fad2a5;
	border-radius: 1rem;
	padding: 1rem 1.5rem 1rem 0;
}


input[type="radio"]:checked.or_btn+label {
	background: #ffa743;
	border-radius: 1rem;
	border: #a76e2d 4px solid;
	font-weight: bold;
	padding: 1rem 1.5rem 1rem 0;
	text-align: center;
}

/******************* 緑の通常ボタン **************/

/******************* 緑の通常ボタン **************/

/******************* オレンジ赤めのボタン **************/
/******************* オレンジ赤めのボタン **************/

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/
/* 吹き出し本体 */

/* beforeで三角を表現 */
/* アイコンを左に表示 */

/*-------------------------------------------*/
/* 吹き出し本体 */

/* beforeで三角を表現 */
/* アイコンを左に表示 */

/*-------------------------------------------*/
/*-------------------------------------------*/
/* 吹き出し本体 */

/* beforeで三角を表現 */
/* アイコンを左に表示 */
/*-------------------------------------------*/

/* beforeで三角を表現 */
/* アイコンを左に表示 */
/*-------------------------------------------*/
/* 吹き出し本体 */

/* beforeで三角を表現 */
/* アイコンを左に表示 */

/* ------------------------------------- */
/*　　　　　　ボックス系　　　　　　　　*/
/* ------------------------------------- */
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/* ------------------------------------- */
/*　　　　　　ボックス系おわり　　　　　　　　*/
/* ------------------------------------- */
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/
/*-------------------------------------------*/

/*-------------------------------------------*/

/*-------------------------------------------*/
/*　　　　　　声　　　　　　　　*/
/* ------------------------------------- */
/*-------------------------------------------*/
/*　　　　　　声　おわり　　　　　　　*/
/* ------------------------------------- */
/*  ----------ローディング-------------- */

/* .bene-main2 {
	background-image: url(../../../../images/project/cfd/nms/bene_bg.png);
	background-repeat: repeat;
	background-size: contain;
	background-position: center;
	border: 3px solid #ff1c1c;
	margin: 2rem auto;
	padding: 1rem 2rem;
	color: #fdf5cd;
} */

/* 当選者100sp */

/* 当選者100sp */

/* 当選者100pc */

/* 右 */

/* 左 */

/* 当選者100pc */


/*--------流れるコメント用------------*/



/*--------流れるコメント用ここまで------------*/


body {
	display: block;
	margin: 0 auto;
	text-align: left;
	font-weight: 500;
	padding: 0;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial;
	letter-spacing: 1.3px;
	background-color: #000000;
	background-image: url(../../../../images/lps/gf_complete/tcwin/bgtcwin.png) top center no-repeat fixed;
	background-size: cover;
}

body::before {
	background-image: url(../../../../images/lps/gf_complete/tcwin/bgtcwin.png);
	background-image: no-repeat;
	background-position: top center;
	background-size: cover;
	content: "";
	top: 0;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
}

/* OPT */

/* 前振り１ */


/* サンクスチェックボタン用 */


.hidden::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* AIコード */

/*////////////////レスポンシブ/////////////////////*/


/* normal */
@font-face {
	font-family: "Noto+Serif+JP";
	src: url("/lps/final/true/fonts/NotoSansJP-Regular.ttf") format(truetype);
	font-weight: normal;
	font-style: normal;
}

/* bold */
@font-face {
	font-family: "Noto+Serif+JP";
	src: url("/lps/final/true/fonts/NotoSansJP-ExtraBold.ttf") format(truetype);
	font-weight: bold;
	font-style: normal;
}

/* italic */
@font-face {
	font-family: "Noto+Serif+JP";
	src: url("/lps/final/true/fonts/NotoSansJP-Regular.ttf") format(truetype);
	font-weight: normal;
	font-style: italic;
}

/******明朝体******/
.mincho {
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 300;
	transform: rotate(0.03deg);
}

.mincho4 {
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 900;
	transform: rotate(0.03deg);
}

/******明朝体_end******/

/******ゴシック体******/
.gothic {
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 300;
	transform: rotate(0.03deg);
}

.gothic2 {
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 400;
	transform: rotate(0.03deg);
}

.gothic3 {
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 700;
	transform: rotate(0.03deg);
}

.gothic4 {
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 800;
	transform: rotate(0.03deg);
}

/******ゴシック体_end******/

/******マーカー******/

/******マーカー_end******/

/******マーカー******/

/******マーカー_end******/

/*　head
*********************************************************/

/*-------------------------------------------*/

/* 3Dセキュアセクション */
/* 表示なし */

/* 3Dセキュアセクション */

/*　layout
*********************************************************/


#header {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	/*	background-image: url("../images/header3.jpg");
	background-position: top center;
*/
	position: relative;
	/*overflow: hidden;*/
}

/*-----------------------*/
/*--footer--*/
#footer {
	width: 100%;
	height: auto;
	padding: 1.0rem 0 0 0;
	margin: 0rem auto;
	background-color: #212121;
	color: #fff;
	font-size: 1.8rem;
}

#footer a {
	color: #fff;
}

#footer a:hover {
	color: #cdcdcd;
}

/*--footer--*/

/*=====================================================
	回転　回る　くるくる
=====================================================*/


/*=====================================================
nav
=====================================================*/

/**********************************************************/


/**********************************************************/

/*-------------------------------------------*/

/*-------------------------------------------*/


/*-------------------------------------------*/

/*-------------------------------------------*/

/* 流れる声  */

/* 1つ分 */

/* 1つ分 */

/* 流れる声 end*/


/* 流れる声 */

/* メアド名前 */
input[type="text"] {
	width: 100%;
	padding: 1.5rem 1rem;
	margin: 0 auto;
	font-size: 1.5rem;
	color: #000000;
	font-weight: bold;
	background-color: #ffffff;
	border: 3px solid #363636;
	border-radius: 0.5rem;
	font-family: "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial;
}

/*  ボタンここから使って */
.buttonpc {
	width: 80%;
	margin: 0 auto;
	padding: 2rem;
	font-size: 2rem;
	border-radius: 80px;
	color: #333333;
	/* background-color: #fff530;
	background-image: url("https://www.transparenttextures.com/patterns/classy-fabric.png"); */
	background: linear-gradient(150deg, rgba(255, 245, 48, 1) 0%, rgba(239, 230, 47, 1) 43%, rgba(151, 146, 39, 1) 64%, rgba(138, 133, 38, 1) 100%);
	border-top: 4px #fff530 solid;
	border-bottom: 4px #8a8526 solid;
	border-right: 4px #8a8526 solid;
	border-left: 4px #fff530 solid;
	box-shadow: 0px 0px 0px 5px #424242;
	cursor: pointer;
	transition-duration: .4s;
	text-decoration: none;
}

.buttonpc:hover {
	box-shadow: 0px 0px 0px 3px #383838;
	/* color: #fb9725; */
	border: 4px #fff530 solid;
	background: linear-gradient(150deg, rgba(255, 245, 48, 1) 0%, rgba(239, 230, 47, 1) 43%, rgba(242, 181, 58, 1) 64%, rgba(255, 84, 84, 1) 100%);
	/* background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png"); */
	text-shadow: 0 0 10px #fff700;
	transform: scale(1.1);
	color: #ff0f0f;
	text-decoration: none;

}

.buttonsp {
	width: 80%;
	margin: 0 auto;
	padding: 1rem;
	font-size: 2rem;
	border-radius: 80px;
	color: #333333;
	/* background-color: #383838;
	background-image: url("https://www.transparenttextures.com/patterns/classy-fabric.png"); */
	background: linear-gradient(150deg, rgba(255, 245, 48, 1) 0%, rgba(239, 230, 47, 1) 43%, rgba(151, 146, 39, 1) 64%, rgba(138, 133, 38, 1) 100%);
	border-top: 4px #fff530 solid;
	border-bottom: 4px #8a8526 solid;
	border-right: 4px #8a8526 solid;
	border-left: 4px #fff530 solid;
	box-shadow: 0px 0px 0px 5px #424242;
	cursor: pointer;
	transition-duration: .4s;
	text-decoration: none;

}

.buttonsp:hover {
	box-shadow: 0px 0px 0px 3px #383838;
	/* color: #fb9725; */
	border: 4px #fff530 solid;
	background: linear-gradient(150deg, rgba(255, 245, 48, 1) 0%, rgba(239, 230, 47, 1) 43%, rgba(242, 181, 58, 1) 64%, rgba(255, 84, 84, 1) 100%);
	/* background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png"); */
	text-shadow: 0 0 10px #fff700;
	transform: scale(1.1);
	color: #ff0f0f;
}

/* ボタン */


/* ボタン最新阿部×大谷 */


/*=======================================*/

.bg-y {
	background-color: #fff89b;
}


/*==========================================*/



/*==========================================*/
/* result
**********************************************************/




/*=====================================================
result
=====================================================*/


/* result
**********************************************************/

/* p.fs25{
	font-size: 2rem;
} */

/*　
*********************************************************/


/*　

/*****************************************
	ユーザー声　エアメール
******************************************/



/*===========================================*/

/*折り畳み*/

/*ボタンホバー時*/

/*チェックは見えなくする*/

/*中身を非表示にしておく*/

/*クリックで中身表示*/


/*********************************************************
/* form
*********************************************************/


label {
	margin: 0.5rem auto;
	width: 50%;
	font-weight: bold;
	cursor: pointer;
	color: #000000;
	background-color: #dddddd;
	padding: 1.5rem 2rem;
	border-radius: 0.5rem;
	display: inline-block;
}

label:hover {
	border: none;
}


/*===========================================*/

th {
	padding: 0.5rem 0;
}

td {
	padding: 0.2rem 0;
	font-size: 1.8rem;
}



table.list {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-spacing: 0.1rem;
	line-height: 1.5;
}


table.list th {
	@media screen and (max-width: 768px) {
		font-size: 1.6rem;
	}

	@media screen and (min-width: 768px) {
		font-size: 2.2rem;
	}

	padding: 1rem;
	text-align: center;
	width: 20%;
	vertical-align: middle;
	font-weight: bold;
	border-bottom: 0.1rem solid #292616;
	border-right: 0.1rem solid #292616;
	color: #000;
	background-color: #e3c500;
	background-image: url("https://www.transparenttextures.com/patterns/mirrored-squares.png");
	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.tatetext {
	writing-mode: vertical-rl;
	white-space: pre;
	display: inline-block;
}

table.list td {
	text-align: left;
	background-color: #ffffff;
	padding: 1rem;
	border-bottom: 0.1rem solid #292616;
}

/* table.tokuten tr.kako{
	text-decoration: line-through double #380000;
} */




/*===========================================*/


/*===========================================*/

/****************************
	eyecatch
*****************************/


/****************************
	loading
*****************************/
/*  ----------ローディング-------------- */

/*  ----------ローディング-------------- */

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


/*=========================================*/


/*=========================================*/

/* ----------------------------------------------
 * Generated by Animista on 2021-6-16 17:32:54
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-bottom-bck
 * ----------------------------------------
 */


/*===========================================*/

/*===========================================*/

/*===========================================*/




/**********************************
	video
***********************************/


/********************************************
	ユーザーの声table
********************************************/


/********************************************
	jisseki table
********************************************/

table.jisseki {
	border-collapse: collapse;
	margin: 2rem auto;
	font-weight: bold;
	width: 100%;
	border: transparent solid 6px;
	text-align: center;
}

table.jisseki tr th {
	background-color: #3cb371;
	background-image: url("https://www.transparenttextures.com/patterns/xv.png");
	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
	border: #131821 1px solid;
	padding: 0.2rem 0;
	color: white;
}

table.jisseki tr td {
	border: rgba(48, 48, 48, 0.3) 2px solid;
	padding: 0.2rem 0;
	background: rgba(255, 255, 255, 0.6);
	background-color: #ffffcc;
	color: #000052;
}

/********************************************
	更新ボタン
********************************************/


/*◆を降らせる201911*/

/*◆を降らせる*/


/********************************************
	流れるコメント
********************************************/


/********************************************
	omega simulation
********************************************/


/*===========================================*/


/*===========================================*/


/* 2.ベースBOXの設定 +++++++++++++++++++++ */

/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */

/* 5.アニメーション個別設定 ++++++++++ */

/* 24年2月 ++++++++++ */

.marker-under-red {
	background: linear-gradient(transparent 60%, #ffd0d1 60%);
}

.red-under {
	border-bottom: 2px solid red;
}



.red-under {
	border-bottom: 2px solid red;
}

/******************************************************/

/******************* 緑の通常ボタン **************/
.place_button_g {
	display: block;
	width: 90%;
	background: linear-gradient(180deg, rgb(241 255 109) 50%, rgb(247 244 94) 53%, rgb(255 227 129) 100%);
	padding: 2.5rem 0;
	margin: 0 auto;
	font-size: 20px;
	color: #1b1800;
	position: relative;
	text-align: center;
	border: 0.5rem outset #035E0E;
	/*background: #F5EA00;*/
	border-radius: 5rem;
	cursor: pointer;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}

.place_button_g:hover {
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
	border: 0.5rem outset transparent;
	background: #004808;
}

/******************* 緑の通常ボタン **************/

/************************25/08fntsl***************************/

.sl1{
	display: block;
	margin: 0 auto;
	text-align: left;
	font-weight: 500;
	padding: 0;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial;
	letter-spacing: 1.3px;
	background-color: #000000;	
}

.sl1::before {
	background-image: url(../../../images/fnt/perex/bg.png);
	background-image: no-repeat;
	background-position: top center;
	background-size: cover;
	position: fixed;
	/***************** position fixed 消すとpc背景消える ********************/
	top: 0;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
}

.th1{
	display: block;
	margin: 0 auto;
	text-align: left;
	font-weight: 500;
	padding: 0;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial;
	letter-spacing: 1.3px;
	background-color: #000000;	
}

.th1::before {
	content: "";
	background-image: url(../../../images/fnt/perex/bg2.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: fixed;
	/***************** position fixed 消すとpc背景消える ********************/
	top: 0;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
}

.wtbc_gouka {
  position: relative;
  background-color: #fff; /* 白背景 */
  max-width: 1200px;
  padding: 3%;
  margin: 0 auto;
  z-index: 0;

  /* 外枠：金属光沢の細かいグラデーション */
  border: 6px solid transparent;
  border-radius: 12px;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  background-image: 
    linear-gradient(#fff, #fff), 
    linear-gradient(
      135deg,
      #fff8dc 0%,   /* 明るい反射 */
      #ffd700 5%,  /* 黄金 */
      #daa520 10%, /* 濃い金 */
      #ffd700 15%, /* 黄金 */
      #fff8dc 20%, /* ハイライト */
      #ffd700 25%, /* 黄金 */
      #b8860b 30%, /* 深み */
      #ffd700 35%, /* 黄金 */
      #fff8dc 40%  /* もう一度ハイライト */
    );

  /* 外側の光彩 */
  box-shadow: 0 0 14px 6px rgba(255, 215, 0, 0.6);
}

/* 内側のオレンジ境界線 */
.wtbc_gouka::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 2px solid #ff8c00; /* 内側線 */
  border-radius: 6px;
  pointer-events: none;
}

.goukabox {
	background-color: #232323;
	background-image: url("https://www.transparenttextures.com/patterns/pinstriped-suit.png");
	margin: 0 auto;
	border: 3px #eeeeee double;
	box-shadow: 0px 0px 15px 3px #fafafa;
	padding: 2% 1.5%;
	border-radius: 8px;
	max-width: 800px;
}

.subhead1 {
  display: block;
  margin: 0 auto;
  padding: 0.6em 2em;
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  color: #fff;
  border: 3px solid #d32f2f; /* 赤枠 */
  border-radius: 50px;       /* 楕円形 */
  background: linear-gradient(to bottom, #ffd54f, #f57c00); /* 黄色→オレンジ */
  position: relative;
  overflow: hidden;
}

/* 光のアニメーション */
.subhead1::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(25px); /* 光の形をぼかす */
  transform: rotate(0deg);
  animation: shineMove 3s infinite ease-in-out;
}

@keyframes shineMove {
  0% { top: -150%; }
  50% { top: 150%; }
  100% { top: -150%; }
}

.boomct {
  max-width: 80%;
  border: 2px solid #8bc34a;   /* 黄緑の枠 */
  background-color: #fff;      /* 白背景 */
  border-radius: 8px;          /* 少し丸みで柔らかさ */
  padding: 1.2rem 1.5rem;
  margin: 0 auto ;
  position: relative;

  /* 片側に黄緑の落ち影（右下方向） */
  box-shadow: 6px 6px 0 #c5e1a5;
}

.youkou {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 0;
}

.metal_box {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  border: 6px solid orange; /* 太いオレンジ枠 */
  border-radius: 12px;
  position: relative;
  overflow: hidden;

  /* 外枠と内枠に赤い細い枠を追加 */
  box-shadow:
    0 0 0 2px red inset,  /* 内側の赤枠 */
    0 0 0 2px red;        /* 外側の赤枠 */
  
  /* 銀のグラデーションをより重厚に */
  background: linear-gradient(
    135deg,
    #fdfdfd 0%,
    #d9d9d9 15%,
    #b0b0b0 30%,
    #e0e0e0 45%,
    #8c8c8c 60%,
    #cfcfcf 75%,
    #a6a6a6 90%,
    #f5f5f5 100%
  );
  background-size: 200% 200%;
}

/* 光沢のアニメーション（斜めに動くぼかし） */
.metal_box::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  filter: blur(40px); /* 光の形がわからないようにぼかす */
  animation: shineDiagonal 2.5s linear infinite; /* 速度を速く */
}

@keyframes shineDiagonal {
  0% { transform: translate(-50%, -50%); }
  100% { transform: translate(50%, 50%); }
}

.table_box {
  max-width: 85%;
  margin: 0 auto;
  padding: 1rem;
  background-color: #ffff99;   /* 2段階薄い*/
  border-radius: 6px;          /* 少し角丸にすると柔らかい印象 */
  box-sizing: border-box;
}

.tyotto_box {
  max-width: 85%;
  margin: 0 auto;
  padding: 1rem;
  background-color: #9eff9e;   /* 2段階薄い*/
  border-radius: 6px;          /* 少し角丸にすると柔らかい印象 */
  box-sizing: border-box;
}

.hitokoto_box {
  max-width: 85%;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fefefe;   
  border-radius: 6px;          /* 少し角丸にすると柔らかい印象 */
  box-sizing: border-box;
}

.design_box_green {
  background-color: #ccffcc;         /* 薄い緑 */
  border: 2px solid #006400;         /* 濃い緑（DarkGreen） */
  border-radius: 10px;               /* 少し丸み */
  margin: 0 auto;
  width: 80%;
  max-width: 1200px;                  /* 横幅制限（任意） */
  background-image: url("https://www.transparenttextures.com/patterns/az-subtle.png");

  /* 外側のオレンジのハイライト */
  box-shadow: 0 0 12px rgba(255, 165, 0, 0.8);
}


<<<<<<< HEAD
/* 内側ベース（明るい緑）＋内側シャドウ */
.hex-box::after {
  content: "";
  position: absolute;
  inset: 4px; /* 枠の太さ */
  background: #99ff99; /* 明るい緑（ベース） */
  clip-path: polygon(
    20px 0%, calc(100% - 20px) 0%, 100% 50%,
    calc(100% - 20px) 100%, 20px 100%, 0% 50%
  );
  z-index: -1;
  box-shadow: inset 0 0 10px rgba(0, 60, 0, 0.7); /* 内側シャドウ */
}

/*****************************************************/

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 横2列 */
  gap: 20px; /* 画像同士の間隔（調整OK） */
  justify-items: center; /* 中央寄せ */
}

.image-grid img {
  width: 100%; /* 好きな大きさに調整 */
  height: auto;
}

/*****************************************************/

/* 吹き出し */

.hukidasi {
  position: relative;
  display: inline-block;
  margin-left: 30px;
  padding: 12px 16px;
  border: 2px solid #000000;
  border-radius: 9999px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.hukidasi::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 7.5px 30px 7.5px 0;
  border-color: transparent #000000 transparent transparent;
  translate: -100% -50%;
}

.hukidasi::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 5.4px 21.8px 5.4px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% -50%;
}

/* 吹き出し-考える */

.balloon {
  display: inline-block;   /* 文章の長さに応じた幅になる */
  position: relative;
  margin: 2em 0 2em 40px;
  padding: 15px;
  background: #c9c9c9;
  border-radius: 30px;
  max-width: 80%;          /* 長すぎるときだけ折り返すようにする */
  word-wrap: break-word;   /* 長い単語でも折り返し可能にする */
}

.balloon:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #c9c9c9;
  border-radius: 50%;
}

.balloon:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #c9c9c9;
  border-radius: 50%;
}

/********************************************************************/

@media screen and (max-width: 980px){

.design_box_green{
	width: 100%;
	max-width: 1200px;
}

.tyotto_box {
	width: 100%;
	max-width: 1200px;
}

}

/************************************************************/

/************************************************************/

@media screen and (max-width: 480px) {

.pconly{
	display: none;
}

.sponly{
	display: block;

}

.pconly_btn{
		display: none;
	}


.subhead1 {
  padding: 1.5em 1.2em;
}

.balloon {
  max-width: 85%;
}

.boomct {
  max-width: 90%;
}

.table_box {
  max-width: 95%;
}

}
/*********************************/