@charset "utf-8";
/* 冒頭でimport */
@import url('https://fonts.googleapis.com/css?family=Raleway:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&display=swap');
/* フォントを指定したいところで */



logo img{
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover; /* 画像のトリミング */
}

logotohome img{
    border-radius: 70%;
    width: 70px;
    height: 70px;
    margin-left: 1em;
    margin-top: 0.5em;
    object-fit: cover; /* 画像のトリミング */
}



/* ========== common ========== */
html, body {
	font-size: 16px;
	/* font-family: sans-serif; */
    font-family: 'Kiwi Maru', serif;
	color: #232323;
    margin-left: 15px;
    margin-bottom: 40px;
	background: #ffffff;
}
a {
    color:#F8485E;
}

h1{
    text-indent: 0em;
}
h2{
    margin-left: 1em;
    margin-top: 1em;
}
h3{
    margin-left: 2em;
}
h4{
    margin-left: 2.5em;
}
p,div,ul,ol{
    margin-left: 3em;
}
div.top{
    background-color: #000000;
    width: 100%;
    margin: 0px;
    padding: 0%;
}
span.blackback{
    text-indent: 3em;
    background: #393939;
    color: #efefef;
}
code{
    color: #393939;
}
.under1 {
    border-bottom: solid 2px red;
}
.under2 {
    border-bottom: solid 5px #87CEFA;
}

h_r{
    padding: 0.0rem 0;
    margin-bottom: 0.2rem;
    border-bottom: 3px dotted #C9E5FA;
    font-weight: bold;
}



/*背景色をつけて角を丸くする*/
.left{
    float: left;
}

.box3{
    width:200px;
    height:100px;
    background-color: rgb(255, 81, 0);
  }
.boximg{
    width: 300px;
    border-radius: 10px;
    display: block;
    margin: auto;
}
.boximg2{
    width: 150px;
    border-radius: 10px;
    display: block;
    margin: auto;
}
.rbox{
	margin: 2em auto; /* ボックスの余白 */
	background-color: #F5C3C2; /* ボックス背景色 */
	padding:2.5em 2em 2em; /* ボックス内側余白 */
    border-radius:30px;/*丸みを調整*/
	position:relative; /* 配置(ここを基準に) */
    width:300px;
    height:300px;
    margin-right: 20px;
}


.abox{
	margin: 2em auto; /* ボックスの余白 */
	background-color: #F7EBBF; /* ボックス背景色 */
	padding:2.5em 2em 2em; /* ボックス内側余白 */
    border-radius:30px;/*丸みを調整*/
	position:relative; /* 配置(ここを基準に) */
    width:300px;
    height:300px;
    margin-right: 20px;
}
.mbox{
	margin: 2em auto; /* ボックスの余白 */
	background-color: #C9E5FA; /* ボックス背景色 */
	padding:2.5em 2em 2em; /* ボックス内側余白 */
    border-radius:30px;/*丸みを調整*/
	position:relative; /* 配置(ここを基準に) */
    width:300px;
    height:300px;
    margin-right: 20px;
}
/*セロテープ風*/
.box-title {
	background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
	box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
	transform: rotate(-2deg);/*テープの傾き*/
	font-size: 1.2em;/*タイトル文字の大きさ*/
    font-weight: bold;
	color: #696969; /*タイトル文字色 */
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/*配置(ここを動かす)*/
	top: -15px; /*上から（-10px）移動*/
	left: -10px; /*左から(20px)移動*/
}

.clear{
	clear:both;
}