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

/*ここから
■【初心者向け】CSSの書き方の鉄板講座！美しいWebデザインを自分で設計しよう！～Flexboxの使い方も網羅～【たった1動画で全てが分かるCSSの教科書】
https://youtu.be/h5xxHuvYy_I
【1：32：18】*/

.containerWrap {
	max-width: 1024px;
	/*デフォルト*/
	max-width: 100%;
	/*2023_08_11*/
	margin: 0 auto;
	padding: 20px;
	padding: 0 5px;
	/*2023_08_13*/
	padding: 0 10px;
	/*2023_10_23【他の診療案内ページと合わせる】*/
	padding: 0 15px;
	/*2023_10_25【グリッドシステムと合わせる】→【※参照ファイル※】whitening\index2023_10_25Flexboxと、グリッドシステム(一例sm-1-div)比較test.html*/

}

.item {
	display: flex;
	align-items: flex-start;
	/*※左右側の画像のストレッチを解除出来、垂直方向の上揃え設定*/
	align-items: center;
	/*※左の画像or右の画像の垂直方向縦位置中央に配置出来る。*/
	justify-content: space-between;
	/*2024_07_21*/

	/*background-color: #eee;テスト用背景*/
	/*薄グリーン背景解除(2023_10_25)background-color: #f4fff5;2023_08_13*/

	/*2025/02/19下部マージン調整CO margin-bottom:40px; */
	margin-bottom: 0px;
}

/*偶数の順番を逆に【html本体の順序は変らないのでレスポンシブウェブデザインのスマホ環境時に有効（ 他の<div class="height-space"></div>
）の要素が入ると効かないので要注意】*/
/*【要注意！診療案内【予防歯科】ページ内Flexboxの２段目の画像と文章箇所の順番を変えない為（スマホ環境時に画像を上部に配置する為）にコメントアウト(2023_11_07)】.item:nth-child(even){
	flex-direction: row-reverse;
}*/


/*順番を逆に*/
/*.item:nth-child(even){
	flex-direction: row-reverse;
}*/


/* 1番目以外の奇数番目の要素にCSSを適用(2023_08_13成功) */

/*奇数番目の要素にCSSを適用するには、:nth-child(odd) 擬似クラスセレクタを使用します。ただし、1番目の要素以外の奇数番目を対象とするためには、:not() 擬似クラスセレクタも併用する必要があります。以下に、1番目以外の奇数番目の要素にCSSを適用する例を示します。
このコードでは、nth-child(odd) で奇数番目の要素を選択し、さらに :not(:first-child) で1番目の要素を除外しています。したがって、1番目以外の奇数番目の要素にだけ指定したスタイルが適用されます。(CG)
↓↓↓*/

/*.item:nth-child(odd):not(:first-child) {
	flex-direction: row-reverse;
}*/


/* 1番目と3番目以外の奇数番目の要素にCSSを適用
.item:nth-child(odd):not(:first-child):not(:nth-child(3)) {
	flex-direction: row-reverse;

} */


/*順番を逆に(横方向で逆方向に並べる設定)【class設定によりhtmlの各パーツで設定可能】*/
.row-reverse {
	flex-direction: row-reverse;

}


/*【※要注意※ 別途html内のitem　classの終了と開始タグの間の<div class="height-space"></div>の<div>の数により動作しないので要注意！(2023_08_13)】*/



.item img {
	/*	flex:1;
*/
	width: 100%;
	/*2024_07_22【ここを設定しないと高解像度（大画面W2560pxの4k等で画像が縮小される）】*/
	height: auto;
}


.item__content {
	padding: 20px;
	padding: 20px 10px;
	/*2023_10_25追加で文字箇所左右余白設定*/
	padding: 20px 30px;
	/*2023_10_26追加で文字箇所左右余白設定*/
	padding: 0;
	/*2024_07_21追加	【上記、.item　で、justify-content: space-between;　を設定の為と、別途下記、flex:0 1 49%;　設定の為に余白無し】*/

	/*2024_07_21下記Flexプロパティに代替にてCU	flex-basis:50%!important;*/
	flex: 0 1 49%;
	/*2024_07_21【注意！】flex:1 1 autoだと画像が表示されない*/
}

.youtube1columnWrap {
	background-color: #f4fff5;
	/*2023_08_13*/
	padding: 20px 0px;
	/*2023_09_03*/
}

.youtube1columnBox {
	width: 50%;
	/*2023_09_03*/
	margin: 0 auto;
}



/*ここから診療案内「噛み締め、くいしばり、歯ぎしり」の改善ページで使用(2024_06_24)Start*/
.item02 {
	display: flex;
	/*下記、flex: 1 1 auto;で、余白の比率の拡大の設定をしているので、設定無しでも問題無いのでCU（space-betweenは両端に寄る） justify-content: space-between; */

}

.item__content02

/*要注意【下記、flex: 0 1 auto　にすると拡大率の設定が0の為にビフォーアフターのコンテンツ全体が左寄せとなるが、flex: 1 1 auto　に設定すると拡大し中央揃えとなる】*/
	{
	flex: 1 1 auto;
}


.item__content02:first-child {
	margin: 0 1px 0 0;
}

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

	.item__content02:first-child {
		margin: 0 5% 0 0;

	}
}

/*ここで診療案内「噛み締め、くいしばり、歯ぎしり」の改善ページで使用(2024_06_24)End*/



/*スマホ環境設定*/
@media (max-width:640px) {


	.item {
		flex-direction: column !important;
		/*縦並び【※要注意上記.item:nth-child(even)に{flex-direction: row-reverse;を設定しているので、importantを付け加える。】*/


		/*align-items: stretch;※スマホ時(max-width:640px)の画像を横幅イッパイに変更出来るが、別途【class="width-full"】でスマホ時に縦横比拡大表示が維持できる。【上記、.itemに設定のalign-items: center;※左の画像or右の画像の縦位置中央に配置出来る。を上書き設定　*/

	}

	.containerWrap {
		margin: 0;
		padding: 20px 2px;
		padding: 10px 0 0 0px;
		/*2023_10_25余白調整*/
	}

	.item__content {
		padding: 20px 5px;

		padding: 2px
			/*この箇所をゼロにすると余白が無くなる2023_08_29*/
			5px 5px 5px;
		/*2023_08_29【悦子先生よりスマホ表示の際の画像と文字間を縮小】*/

	}

	.item img {
		width: 100%;
		/*【要注意(大事)！】ここのwidth:100%;を設定しないと640px以下（Googledeveloper）画像が別途上部に記載の50%と縮小されてしまい反映されないので要注意(2023_10_25)*/
	}

	.item__content {
		width: 100%;
		/*要注意(大事)！】ここのwidth:100%;を設定しないと640px以下TOPページスライド箇所#viewerが表示されないので要注意(2024_07_21)*/
	}
}