*{  /* デフォルトの要素間の余白を無くす*/
    margin: 0px;
    padding: 0px;
}
/*************   responsible ****************/
*, *:before, *:after {   /*ボーダーを内側に*/
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}
.box2 {   /*各ボックス幅を30%に、ボーダーの線幅を5px*/
    display: inline-block;
    width: 30%;
    border: 5px solid #ccc;
    margin: 0 5px 0 0;
    padding: 15px;
}
@media only screen and (max-width:480px) {  /*スマホ画面の幅が480px以下になるとblock要素になり縦並びに*/
.box {display: block;width: 100%;margin: 0 0 5px 0;}
}

/* ==================== コンテナ    ===============================*/
.head {
    margin: 1px auto;  /*他の要素との上下余白を1pxとる*/
	background: aqua;
}
.cont1 {
    margin: 5px auto;
	background: silver;
	height: 35vh;  /*要素の35％の高さ*/
}
.tail {
    margin: 5px auto;
	background: aqua;
}
.mainImg {
    margin: 10px auto;
	background: silver;
	height: 35vh;  /*要素の35％の高さ*/
}
img {
    max-width: 100%; /*横幅をコンテナ内に収める*/
    vertical-align: top;  /*画像を上寄せ*/
}
.container1 {  
    margin: 20px auto;
	width: 100%;
    height: 100%;
	max-width: 1170px;	
	padding: 26px; /*左右上下に*/
	
	background: rgb(196, 233, 139);
    overflow: hidden;  /*画像imgが大きすぎる部分は非表示にする*/
} 
.cont2 {  /* html css 説明用*/
    margin: 15px auto;
	background: blueviolet;
	height: 90vh;  /*デバイスの画面高さの90％*/
}
.cont3 {  /* html css 説明用*/
    margin-left: 50px;
    padding: 30px;
	background: rgb(206, 166, 243);
	height: 55vh;  /*デバイスの画面高さの55％*/
}
.overlay-container {  
    position: relative;
    margin: 0 auto;

	width: 100%;
    height: 100%;
	max-width: 1170px;
	
	padding-left: 16px;
	padding-right: 16px;
	background: rgb(238, 238, 145);
    overflow: hidden;  /*画像imgが大きすぎる部分は非表示にする*/
} 

.overlay-container img {  /* overlay-container内のimgに対して*/
    display:block; /*親要素overlay-containerの幅全体を占有し、他の要素とは縦並びになる*/
    width:80%;
}
.overlay-container .text-overlay {
    position: absolute;
    top:85%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size:20px;
}
.sample {
    padding:15px;
    display:block;
}
.sample2 {
    display:flex;
    gap: 25px;  /*要素間のすき間*/
    padding: 25px;
}
.bluebg{
    background:blue;
    width: 100px;
    text-align: center;
    line-height: 1.5;  /* 1.5 times the font size*/
}
.redbg{
    background:red;
    width: 100px;
    text-align: center;
}
.nav-box{
    background:bisque;
    width: 100px;
    text-align: center;
    line-height: 1.5;  /* 1.5 times the font size*/
    color:black;
}

/* ==================== 余白    ===============================*/
.container2{
    border: 3px dashed;
}
.block1{
    background-color: lightgray;
}
.block2{
    background-color: skyblue;
    margin: 30px;
}
.block3{
    background-color: orange;
    padding: 20px;
}
.container3 {  
    margin: 0 auto;
	width: 100%;
    height: 100%;
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 50px;
	padding-right: 50px;
	background: rgb(190, 223, 140);
    overflow: hidden;  /*画像imgが大きすぎる部分は非表示にする*/
} 

/* ==================== 区切り線    ===============================*/
.cp_hr07{
    position: relative;
    overflow: visible;
    text-align: center;
    color: #f06292;
    border-width: 3px 0 0 0;
    border-style: double;
    border-color: #f06292;
    margin: 10px;
}
.cp_hr07::after{
    position: absolute;
    top: -0.8em;
    left: 50%;
    display: inline-block;
    content: '♡';
    background: #ffffff;
}