@import url("style.css");
@import url("inview.css");


/* パンくず
---------------------------------------------------------------------------*/

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
		padding: var(--space-small);
  list-style: none;
}

.breadcrumb li:not(:last-of-type)::after {
  content: "»";
  margin: 0 .6em; /* 記号の左右の余白 */
  color: #777; /* 記号の色 */
}



/*box1（1つ目のセクションボックス）
---------------------------------------------------------------------------*/

/*並べ替え*/
.order1 {
	order: 1;
	/*orderは数字の小さな順番に並びます。デフォルトは0なので、それより後ろに表示させたいブロックに使います。（※flex内で使用）*/
}

/*ボックス全体*/
.box1 {
	overflow-x: visible;
	position: relative;
	background: #F5F4EC;
	/*背景色*/
	padding: var(--space-large);
	/*ボックス内の余白。冒頭にあるspace-largeを読み込みます。*/
	margin-top: 3vw;
	/*上に空けるスペース。スライドショーとこのボックスの間のスペースです。お好みで。*/
}

/*ボックス上部の大きな装飾テキスト*/
.box1 .deco-text {
	position: absolute;
	right: 0;
	top: -13.5vw;
	/*文字とボックスの配置バランスです。お好みで調整して下さい。*/
	color: #F5F4EC;
	/*文字色*/
	font-size: 7vw;
	/*下の.box1のmargin-topと合わせる*/
	line-height: 1;
}


/*テキストボックス*/
.box1 .text {
	margin-bottom: 5rem;
	/*下に5文字分の余白*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:900px) {

	.box1 {
		display: flex;
		/*横並びにする*/
		gap: 10vw;
		/*左右の間のスペース*/
		border-radius: 20vw 0 20vw 0;
		/*角を丸くする指示。左上、右上、右下、左下への順番。*/
	}

	.box1-l {
		border-radius: 20vw 0 20vw 0;
	}


	.box1-r {
		border-radius: 0 20vw 0 20vw;
	}

	.box1 > * {
		flex: 1;
	}

	/*テキストボックスの上の小さなイラスト*/
	.box1 h2 img {
		width: 5vw;
		/*幅*/
	}

	.box1 .text {
		margin-bottom: 0;
		/*下マージンのリセット*/
	}

}

/*追加指定ここまで*/


/*画像を囲むブロック*/
.box1 .image {
	position: relative;
}

/*画像の角を少し丸くする指定*/
.box1 .image img {
	border-radius: 10px;
}

/*画像ブロック内の１枚目の写真への追加指定*/
.box1 .image img:nth-of-type(1) {
	width: 100%;
	/*画像の幅*/
}

/*画像ブロック内の２枚目の写真への追加指定*/
.box1 .image img:nth-of-type(2) {
	width: 40%;
	/*画像の幅*/
}

.box1 .image img:nth-of-type(2) {
	position: absolute;
	right: 0;
	/*画像ブロックに対して右側からの配置場所*/
	top: 15vw;
	/*画像ブロックに対して上からの配置場所*/
}


/*---------------------------------------------------------
 　　　　　　　　2列
-----------------------------------------------------------*/


table.ta2 {
	width: 100%;
	border-collapse: collapse;
	margin-top: 30px;
	padding: 10px 20px;
}

.ta2 th,
.ta2 td {
	vertical-align: top;
	background: #ffffff;
	padding: 20px 30px;
	border: solid 1px #ccc;
	box-sizing: border-box;
}

.ta2 th {
	width: 20%;
	background: #efefef;
}

@media screen and (max-width: 900px) {
	.ta2 {
		width: 100%;
	}

	table.ta2 th,
	table.ta2 td {
		display: block;
		width: 100%;
		border-bottom: none;
	}

	.ta2 tr:last-child {
		border-bottom: solid 1px #ccc;
	}
}

/* 経歴　*/
.ta3 caption {
	font-family: "Zen Antique", serif;
	font-size: 1.6rem;
	/*太字に*/
	padding: 0.5rem 1rem;
	/*ボックス内の余白*/
	background: #F5F4EC;
	/*背景色*/
	color: #222222;
	/*文字色*/
	margin-bottom: 1rem;
	/*下に空けるスペース*/
	border-radius: 5px;
	/*角を丸くする指定*/


}


table.ta3 {
	width: 100%;
	border-collapse: collapse;
	padding: 10px 20px;
}

.ta3 td {
	width: 40%;
	vertical-align: top;
	background: #ffffff;
	padding: 20px 30px;
	border: solid 1px #ccc;
	box-sizing: border-box;
}


@media screen and (max-width: 900px) {
	.ta3 {
		width: 100%;
	}

	table.ta3 td {
		display: block;
		width: 100%;
		border-bottom: none;
	}

	.ta3 tr:last-child {
		border-bottom: solid 1px #ccc;
	}
}


@media screen and (min-width:900px) {
	.container {
		display: flex;
		padding: var(--space-large);
	}


	.box2 > * {
		flex: 1;
		padding: 0 20px;
	}



}


.container {
	width: 100%;
	padding: var(--space-large);
}


.box2 {
	width: 100%;
	margin: auto;
	padding: 15px 0;
}

/* service
---------------------------------------------------------------------------*/

.service h3 {
	border-bottom: solid 3px rgba(52, 165, 69, 0.29);
	position: relative;
	font-size: 1.2em;
	padding: 10px 0px;
	font-family: "BIZ UDPGothic", sans-serif;
}

.service h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #34a545;
	bottom: -2px;
	width: 20%;
}

.service p {
	padding: 10px 10px 20px 10px;
}


/*　コラム
-------------------------------------------------------------------------*/
.colomn {
    padding: 0.5rem 1.0rem;
    
}
.colomn .title_c {
    font-family: "Zen Antique", serif;
    font-size: 1.6rem;
    /*太字に*/
    padding: 0.5rem 1rem;
    /*ボックス内の余白*/
    background: #F5F4EC;
    /*背景色*/
    color: #222222;
    /*文字色*/
    margin-bottom: 1rem;
    /*下に空けるスペース*/
    border-radius: 5px;
    /*角を丸くする指定*/
}

.colomn .text {
    padding: 0.5rem 0.8rem;
    
}

.sayu {
  display: flex;
  justify-content: space-between; /* 左右に最大間隔で配置 */
  align-items: center; /* 垂直方向の中央揃え */
}


/*　お知らせ　　タブ切り替え
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.others-tab1-parts {
	list-style: none;margin: 0 !important;padding: 0;
	display: flex;
	gap: 0.4rem;	/*メニュー同士に空けるスペース*/
}

/*メニュー１個あたり*/
.others-tab1-parts li {
	cursor: pointer;
	user-select: none;
	flex: 1;
	text-align: center;
	transition: 0.3s;
	background: #ddd;	/*背景色*/
	color: #999;		/*文字色*/
	padding: 1rem 2rem;	/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	border-radius: 5px 5px 0 0;	/*角を丸くする。左上、右上、右下、左下への順番。*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*現在表示メニューと、hover時共通*/
.others-tab1-parts li.others-tab1-active-parts,
.others-tab1-parts li:hover {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

.others-tab2-parts li.others-tab2-active-parts,
.others-tab2-parts li:hover {
	background: #5fb2d6;		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

.others-tab3-parts li.others-tab3-active-parts,
.others-tab3-parts li:hover {
	background: #d8bd2c;		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}



/*コンテンツブロック*/
.others-tab1-content-parts {
	display: none;
	padding: 2rem;	/*コンテンツ内の余白。２文字分。*/
	border: 2px solid var(--primary-color);	/*コンテンツの枠線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
}

/*現在表示中のコンテンツブロック*/
.others-tab1-content-parts.others-tab1-active-parts {
	display: block;
}




/* おしらせ　タブ切り替え
-----------------------------------------------------*/

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tab_label {
  color: #00A956;
  border: solid 2px #00A956;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  padding: 5px 10px;
  margin: 0 5px; 
    text-align: center;
}


.tab_label:hover {
  opacity: 0.75;
}

.tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
}

input[name="tab_switch"] {
  display: none;
}

.tabs input:checked + .tab_label {
  color: #fff;
  background-color: #00A956;
}
.tabs input:checked + .tab_label::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #00A956 transparent transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}

#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content {
  display: block;
}

.tab_content{
  position: relative;
  animation: fadeIn 1s ease;
}