/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* -------------------------------------------------- */
/* https://sukoyuto.com/css-design/ */
.box01 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	border: solid 3px #000000; /* 線の種類 太さ 色*/
}
.box01 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	font-weight: bold; /* 文字太さ */
}

.box02 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	border: solid 3px #6091d3; /* 線の種類 太さ 色*/
	border-radius: 10px; /* 角の丸み */
}
.box02 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #6091d3; /* 文字色 */
	font-weight: bold; /* 文字太さ */
}

.box03 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #cde4ff; /* 背景色 */
}
.box03 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #2c2c2f; /* 文字色 */
}

.box04 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #cde4ff; /* 背景色 */
	border-top: solid 5px #5989cf; /* 上 線の種類 太さ 色 */
	border-bottom: solid 5px #5989cf; /* 下 線の種類 太さ 色 */
}
.box04 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #2c2c2f; /* 文字色 */
}

.box04pink { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #FFD5EC; /* 背景色 */
	border-top: solid 5px #E2818C; /* 上 線の種類 太さ 色 */
	border-bottom: solid 5px #E2818C; /* 下 線の種類 太さ 色 */
}
.box04pink p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #2c2c2f; /* 文字色 */
}


.box05 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	border: double 5px #4ec4d3; /* 線の種類 太さ 色 */
}
.box05 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
}

.box06 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #f0f7ff; /* 背景色 */
	border: dashed 2px #5b8bd0; /* 線の種類 太さ 色 */
}
.box06 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
}

.box07 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: whitesmoke; /* 背景色 */
	border-left: double 7px #4ec4d3; /* 左 線の種類 太さ 色 */
	border-right: double 7px #4ec4d3; /* 右 線の種類 太さ 色 */
}
.box07 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #474747; /* 文字色 */
}

.box08 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #fff8e8; /* 背景色 */
	border-left: solid 10px #ffc06e; /* 左 線の種類 太さ 色 */
}
.box08 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #232323; /* 文字色 */
}

.box09 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #ffebe9; /* 背景色 */
	border-top: solid 10px #ff7d6e; /* 上 線の種類 太さ 色 */
}
.box09 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #ff7d6e; /* 文字色 */
}

.box10 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #e4fcff; /* 背景色 */
	border-top: solid 6px #1dc1d6; /* 上 線の種類 太さ 色 */
	box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.32); /* 水平 垂直 ぼかし 広がり 色 */
}
.box10 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #00BCD4; /* 文字色 */
}

.box11 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: white; /* 背景色 */
	border-top: solid 5px #5d627b; /* 上 線の種類 太さ 色 */
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); /* 水平 垂直 ぼかし 広がり 色 */
}
.box11 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #5d627b; /* 文字色 */
}

.box12 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #c6e4ff; /* 背景色 */
	border-bottom: solid 6px #aac5de; /* 下 線の種類 太さ 色 */
	border-radius: 9px; /* 角丸 */
}
.box12 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #5989cf; /* 文字色 */
}

.box13 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #6eb7ff; /* 背景色 */
	border-bottom: solid 6px #3f87ce; /* 下 線の種類 太さ 色 */
	border-radius: 9px; /* 角丸 */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* 水平 垂直 ぼかし 広がり 色 */
}
.box13 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #fff; /* 文字色 */
}

.box14 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #d6ebff; /* 背景色 */
	border: dashed 2px white; /* 線の種類 太さ 色 */
	box-shadow: 0px 0px 0px 10px #d6ebff; /* 水平 垂直 ぼかし 広がり 色 */
}
.box14 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
}

.box15 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #ffeaea; /* 背景色 */
	border: dashed 2px #ffc3c3; /* 線の種類 太さ 色 */
	box-shadow: 0px 0px 0px 10px #ffeaea; /* 水平 垂直 ぼかし 広がり 色 */
	border-radius: 8px; /* 角丸 */
}
.box15 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #565656; /* 文字色 */
}

.box16 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); /* ストライプの角度, 色1始点, 色1終点, 色2始点, 色2終点, 繰返し */
	background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); /* Google Chrome、Safari向け */
}

.box16 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
}

.box17 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
}
.box17:before, .box17:after{
	content: '';
	position: absolute;
	top: -10px;
	width: 2px;
	height: -webkit-calc(100% + 20px);
	height: calc(100% + 20px);
	background-color: black;
}
.box17:before { left: 10px; }
.box17:after { right: 10px; }
.box17 p {
	margin: 0;
	padding: 0 2em 1em;
}

.box18 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
	border: solid 2px #ffcb8a;
	border-radius: 3px 0 3px 0;
}
.box18:before, .box18:after{
	content: '';
	position: absolute;
	width:10px;
	height: 10px;
	border: solid 2px #ffcb8a;
	border-radius: 50%;
}
.box18:before {
	bottom:-12px;
	right:-12px;
}
.box18:after {
	top:-12px;
	left:-12px;
}
.box18 p {
	margin: 0;
	padding: 0 1em 1em;
}

.box19 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
}
.box19:before, .box19:after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 20px;
	height: 30px;
}
.box19:before {
	border-left: solid 1px #5767bf;
	border-top: solid 1px #5767bf;
	top: 0;
	left: 0;
}
.box19:after {
	border-right: solid 1px #5767bf;
	border-bottom: solid 1px #5767bf;
	bottom:0;
	right: 0;
}
.box19 p {
	margin: 0;
	padding: 0 1em 1em;
}

.box20 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
}
.box20:before, .box20:after{
	content: '';
	position: absolute;
	display: inline-block;
	top: 0;
	width: 10px;
	height: 100%;
	box-sizing: border-box;
}
.box20:before {
	border-left: dotted 2px #15adc1;
	border-top: dotted 2px #15adc1;
	border-bottom: dotted 2px #15adc1;
	left: 0;
}
.box20:after {
	border-top: dotted 2px #15adc1;
	border-right: dotted 2px #15adc1;
	border-bottom: dotted 2px #15adc1;
	right: 0;
}
.box20 p {
	margin: 0;
	padding: 0 1em 1em;
}

.box21 {
	margin: 0 0 2em;
	padding: 1em 0 0;
	background: linear-gradient(to right, #ffb03c, #ff708d);
	background: -webkit-linear-gradient(#ffb03c, #ff708d);
}
.box21 p {
	margin: 0;
	padding: 0 1em 1em;
	color: #fff;
}

.box22 {
	margin: 0 0 2em;
	padding: 1em 0 0;
	background: #f4f4f4;
	border-left: solid 6px #5bb7ae;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.33);
}
.box22 p {
	margin: 0;
	padding: 0 1em 1em;
}

.box24 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
	background: #e6f4ff;
}
.box24:after{
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #e6f4ff;
	width: 0;
	height: 0;
}
.box24 p {
	margin: 0;
	padding: 0 1em 1em;
	color: #5c98d4;
	font-weight: bold;
}

.box25 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
	background: #fff0cd;
	box-shadow: 0px 0px 0px 5px #fff0cd;
	border: dashed 2px white;
}
.box25:after{
	position: absolute;
	content: '';
	right: -7px;
	top: -7px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: #ffdb88 #fff #ffdb88;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
	margin: 0;
	padding: 0 1em 1em;
	color: #454545;
}

.box26 {
	position: relative;
	margin: 2em 0;
	padding: 1em 0 0;
	border: solid 3px #95ccff;
	border-radius: 8px;
}
.box26 .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 18px;
	background: #FFF;
	color: #95ccff;
	font-weight: bold;
}
.box26 p {
	margin: 0;
	padding: 0 1em 1em;
}

.box26gray {
	position: relative;
	margin: 2em 0;
	padding: 1em 0 0;
	border: solid 3px #f1f1f1;
	border-radius: 8px;
}
.box26gray .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 18px;
	background: #FFFFFF;
	color: #f1f1f1;
	font-weight: bold;
}
.box26gray p {
	margin: 0;
	padding: 0 1em 1em;
}

.box26yellow {
	position: relative;
	margin: 2em 0;
	padding: 1em 0 0;
	border: solid 3px #FFC107;
	border-radius: 8px;
}
.box26yellow .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 18px;
	background: #FFFFFF;
	color: #FFC107;
	font-weight: bold;
}
.box26yellow p {
	margin: 0;
	padding: 0 1em 1em;
}

.box26pink {
	position: relative;
	margin: 2em 0;
	padding: 1em 0 0;
	border: solid 3px #E2818C;
	border-radius: 8px;
}
.box26pink .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 18px;
	background: #FFFFFF;
	color: #E2818C;
	font-weight: bold;
}
.box26pink p {
	margin: 0;
	padding: 0 1em 1em;
}

.box27lightblue {
	position: relative;
	margin: 2em 0;
	padding: 1em 0 0;
	border: solid 3px #95ccff;
}
.box27lightblue .box-title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #95ccff;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
.box27lightblue p {
	margin: 0;
	padding: 0 1em 1em;
}

.box27gray {
	position: relative;
	margin: 2em 0;
	padding: 1em 0 0;
	border: solid 3px #f1f1f1;
}
.box27gray .box-title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #f1f1f1;
	color: #000000;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
.box27gray p {
	margin: 0;
	padding: 0 1em 1em;
}

.box28 {
	position: relative;
	margin: 0 0 2em;
	padding: 1.5em 0 0;
	border: solid 2px #FFC107;
}
.box28 .box-title {
	position: absolute;
	display: inline-block;
	top: -2px;
	left: -2px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #FFC107;
	color: #ffffff;
	font-weight: bold;
}
.box28 p {
	margin: 0;
	padding: 0 1em 1em;
}

.box29 {
    margin: 2em 0;
    background: #dcefff;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

.box30 {
	margin: 0 0 2em;
	background: #f1f1f1;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
	font-size: 18px;
	background: #5fc2f5;
	padding: 8px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.box30 p {
	margin: 0;
	padding: .5em 1em;
}