@charset "utf-8";
/*************************************************
 サイト基本レイアウト
*************************************************/

/* -----------------------------------------------
	・ブラウザリセット,html,body
	・ページ全体レイアウト header,contents,side,footer
	・基本パーツデザイン(a,ol,ul,hr)
	・サイトの共通デザイン（タイトル、よく使うデザイン等）
	・汎用
------------------------------------------------ */
/* サイトメインカラー 奇数：濃、偶数：薄
グリーン：
c_1	#6bc2ac
c_2	#e2f7f2

ピンク
c_3	#ff98a3
c_4	#ffe0e3

黄：
c_5	#f5cc75
c_6	#fff2d7

茶
c_7	#998978

グレー
c_8	#f6f6f6

ブレイクポイント
SP：～780px
タブレット：980px（1カラム？）
780+200
PC：981～1200
1200以上　余白
*/

/* test用 */
/*
body {
	font-size: 2px;
	color: #999;
}
*/

/* -----------------------------------------------
  html,body
------------------------------------------------ */
* {
	margin: 0;
	padding: 0;
}
html{
	height: 100%;
	overflow-y:scroll;
	color:#000;
	background:#FFF;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}
 
ol,
ul {
	list-style:none;
}

body {
	position: relative;
	height: auto;
	background: #fff;
	padding: 0;
	margin: 0;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	color: #696969;
	font-size: 14px;
	line-height: 180%;
}



/* ***********************************************
 サイト全体レイアウト
*********************************************** */

/* ---------------------------
 header
--------------------------- */
.header_menu {
	margin: 0;
	height: 120px;
	margin-bottom: -30px;
	overflow: visible;
	display: flex;
}
.logo_box {
	text-align: center;
	font-size: 16px;
}
@media (min-width: 780px) {
	.header_menu {
	}
	.logo_box {
		float: left;
		width: 18%;
		max-width: 200px;
		padding: 0 20px 0 10px;
/*
		width: 21%;
		max-width: 210px;
*/
	}
}
.logo {
	display: block;
	width: max-content;
	padding: 3px 20px 12px;
	margin: 0 auto;
	background: rgba(226,247,242,0.1);
	border: 1px solid #ddd;
	border-top: 0;
	border-radius: 0 0 10px 10px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
.logo:hover {
	padding: 13px 20px 12px;
}
header nav .sitemenu {
}
header nav .sitemenu li {
	font-size: 14px;
	display: inline-block;
}
header nav .sitemenu li a {
	display: block;
	color: #666666;
	text-decoration: none;
	font-weight: bold;
}
header nav .sitemenu li img {
	margin: 0 5px;
	vertical-align: middle;
}
/* それぞれのタブ */
header nav .sitemenu li.make {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 15px 15px 0 0;
	margin: 30px 0 0 30px;
	background: rgba(255,255,255,0.7);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
header nav .sitemenu li.make a {
	padding: 30px 20px 30px;
	border-radius: 15px 15px 0 0;
	font-size: 16px;
}
header nav .sitemenu li.make:hover {
	margin: 20px 0 0 30px;
}
header nav .sitemenu li.make:hover a {
	padding: 30px 20px 40px;
}
header nav .sitemenu li.make:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 20px;
	background: #ffe0e3;
	background-image: radial-gradient(#ff98a3 20%, transparent 0), radial-gradient(#ff98a3 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  border-radius: 15px 15px 0 0;
	top: 0;
	left: 0;
}

header nav .sitemenu li.about_site,
header nav .sitemenu li.howto_print {
	transform: rotate(-40deg);
	padding: 0;
	margin-right: -40px;
}
header nav .sitemenu li.about_site a,
header nav .sitemenu li.howto_print a {
	padding: 15px 15px 15px 70px;
}

header nav .sitemenu li.about_site:hover,
header nav .sitemenu li.howto_print:hover {
	border-radius: 0 0 20px 0;
}
header nav .sitemenu li.about_site:hover:before,
header nav .sitemenu li.howto_print:hover:before {
	border-radius: 0 0 17px 0;
}
header nav .sitemenu li.howto_print {
	transform: rotate(-60deg);
}

 /* ページclass IDに合わせてそのページの付箋が前に来るように */
body.make header nav .sitemenu li.make,
body.about_site header nav .sitemenu li.about_site,
body.howto_print header nav .sitemenu li.howto_print {
	z-index: 11;
}


/* SPのみのメニュー・固定ボタン
----------------- */
@media (max-width: 780px) {
	#drawer-checkbox {
	  display: none;
	}
	/* メニューボタン */
	#drawer-icon {
		display: block;
		position: fixed;
		top: 0.3%;
		right: 1%;
		height: 40px;
		width: 40px;
		background: #ff98a3;
		border-radius: 4px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		font-size: 11px;
		z-index:99;
	}
	#drawer-icon span {
		display: block;
		background: #fff;
		border-radius: 4px;
		width: 80%;
		height: 10%;
		position: absolute;
		left: 0;
		top: 34%;
		margin: 0 10% 0;
		transition: all 0.3s ease-in-out;
	}
	#drawer-icon span::before,
	#drawer-icon span::after {
		background: #fff;
		border-radius: 4px;
		content: "";
		width: 100%;
		display: block;
		height: 100%;
		position: absolute;
		left: 0;
		top: 70%;
		margin: 0;
		-webkit-transform: rotate(0);
		transform: rotate(0);
		transition: all 0.3s ease-in-out;
	}
	#drawer-icon span::before {
	  margin-top: -38%;
	}
	#drawer-icon span::after {
	  margin-top: 19%;
	}
	#drawer-checkbox:checked ~ #drawer-icon span {
	  background: rgba(51, 51, 51, 0);
	}
	#drawer-checkbox:checked ~ #drawer-icon span::before,
	#drawer-checkbox:checked ~ #drawer-icon span::after {
		content: "";
		display: block;
		height: 100%;
		left: 0;
		margin: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
	#drawer-checkbox:checked ~ #drawer-icon span::before {
	  -webkit-transform: rotate(-45deg);
	          transform: rotate(-45deg);
	}
	#drawer-checkbox:checked ~ #drawer-icon span::after {
	  -webkit-transform: rotate(45deg);
	          transform: rotate(45deg);
	}

	/* 周りタップでメニューを閉じる */
	#drawer-close {
	  display: none;
	  position: fixed;
	  z-index: 20;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #fff;
	  opacity: 0;
	  transition: all 0.3s ease-in-out 0s;
	}
	#drawer-checkbox:checked ~ #drawer-close {
	  display: block;
	  opacity: 0.5;
	}
	
	/* メニュー */
	#sp-nav {
/*		position: fixed;
		top: 0px;
		right: 0;
		z-index: 21;
    width: 100%;
    height: 100%;
*/
	}
	#drawer-nav {
		background: #ff98a3;
		position: fixed;
		top: 50px;
		right: 0;
		z-index: 21;
		width: 70%;
		height: calc(100% - 50px);
		min-width: 200px;
		max-width: 400px;
	  transition: all 0.3s ease-in-out 0s;
	  transform: translateX(100%);
		 overflow: scroll;
    -webkit-overflow-scrolling: touch;
	}
	#drawer-nav li {
		border-bottom: 1px solid #fff;
		height: 45px;
	}
	#drawer-nav li a,
	#drawer-nav li label {
		display: block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		line-height: 45px;
		padding: 0;
		color: #fff;
		text-align: center;
		text-decoration: none;
		font-weight: bold;
		font-size: 98%;
	}
	/* ×閉じる */
	#drawer-nav li label {
		position: relative;
		opacity: 1;
		background: #998978;
	}
	#drawer-nav li label:before,
	#drawer-nav li label:after {
		content: '';
		height: 10%;
		width: 10%;
		display: block;
		background: #fff;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		position: absolute;
		top: 45%;
		left: 20%;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
	}
	#drawer-nav li label:after {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	}


	#drawer-checkbox:checked ~ #drawer-nav {
		transform: translateX(0);
	}

}/* /SPのみのメニュー・固定ボタン */



/* ---------------------------
 メインコンテンツ
--------------------------- */
.main_size {
	width: 100%;
	max-width: 1200px;
}
/*
.main_box {
	z-index: 10;
	overflow: hidden;
	width: 95%;
	margin: 0 0 0 10px;
	padding: 30px 1% 10px 4%;
	border: 1px solid #ccc;
	background-color: #fff;
	background-image: url("../img/bg-mainbox.png");
	background-repeat: repeat-y;
	background-position: -25px 0px;
	box-shadow: -1px 0px 10px rgba(120,120,120,0.3);
}
@media (min-width: 780px) {
	.main_box {
		width: 73%;
		padding: 30px 15px;
		margin: 0 0 0 1%;
	}
}
*/
.notebook {
	z-index: 10;
	overflow: hidden;
	width: 99%;
	margin: 0;
	padding: 10px 1% 10px 0;
	/* background-color: #fff; */
	background-image: url("../img/bg-mainbox.png");
	background-repeat: repeat-y;
	background-position: 0px 0px; /* left top*/
	position: relative;
}
@media (min-width: 780px) {
	.notebook {
		width: 78%;
	}
}
.notebook:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 150%;
	z-index: -1;
	animation-name: link_action ;/* アニメーション名 */
	animation-duration: 2s;/* アニメーション時間 */
}
/*
.ppr_anime {
	position: relative;
	width:100%;
	height: 100%;
	overflow: hidden;
}
.ppr_anime:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 150%;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	z-index: -1;
	animation-name: link_action ;
	animation-duration: 2s;
}
*/
@keyframes link_action {
	0% {
		z-index: 99;
		opacity: 1;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background: -moz-linear-gradient(top left, #FFF 80%, #d0d0d0 100%); 
		background: -webkit-linear-gradient(top left, #FFF 80%, #d0d0d0 100%); 
		background: linear-gradient(to bottom right, #FFF 80%, #d0d0d0 100%); 
		box-shadow: 1px 1px 2px rgba(200,200,200,0.8);
		transform: matrix(1, -0.2, 0, 1, 0, 0);
	}
	50% {
		opacity: 1;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}
	100% {
		z-index: -1;
		opacity: 0;
		border: 0;
		background: -moz-linear-gradient(top left, #FFF 80%, #eee 100%); 
		background: -webkit-linear-gradient(top left, #FFF 80%, #eee 100%); 
		background: linear-gradient(to bottom right, #FFF 80%, #eee 100%); 
		box-shadow: 50px 50px 50px rgba(200,200,200,0);
		transform: matrix(1, -0.5, -0.5, 1, -2000, 0);
	}
}
.main_box {
	margin-left: 30px;
	padding: 30px 10px 10px 25px;
	background: -moz-linear-gradient(top, #fff 90px, transparent 90px, transparent 100%); 
	background: -webkit-linear-gradient(top, #fff 90px, transparent 90px, transparent 100%); 
	background: linear-gradient(to bottom, #fff 90px, transparent 90px, transparent 100%); 
	/* border: 1px solid #ccc; */
	box-shadow: 0px 0px 10px rgba(120,120,120,0.3);
}




/* ---------------------------
 サイドメニュー
--------------------------- */
aside {
	display: none;
}
@media (min-width: 780px) {
	aside {
		display: block;
		float: left;
		width: 18%;
		max-width: 210px;
    overflow: hidden;
		padding: 30px 20px 0 10px;
		margin: 10px -20px 0 0;
		box-shadow: 0px 0px 10px rgba(120,120,120,0.3);
	}
}

aside .howto_memo title {
}
aside .howto_memo ol {
	counter-reset: number;
	font-size: 12px;
	line-height: 170%;
}
aside .howto_memo li {
	padding: 0 0 0 30px;
	margin: 15px 0;
}
aside .howto_memo li:before {
	position: absolute;
	counter-increment: number;
	content: counter(number);
	display: inline-block;
	background: #ff98a3;
	border-radius: 50%;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight: bold;
	font-size: 15px;
	left: 0;
	width: 20px;
	height: 20px;
	line-height: 19px;
	text-align: center;
	top: 0;
}


/* ---------------------------
 footer
--------------------------- */
footer {
	clear: both;
	margin: 30px 0 0;
	background: #f6f6f6;
}
footer .main_size {
	margin: auto;
}
footer nav {
	padding: 20px 0;
	display: flex;
	-webkit-flex-direction: row; /* Safari */
	flex-direction: row;
	-webkit-justify-content: flex-start; /* Safari */
 justify-content: flex-start;
}
footer nav ul {
	display: block;
	width: 200px;
	font-size: 10px;
	list-style: none;
}
footer nav ul li {
	line-height: 150%;
	margin: 5px 0;
}
footer p.copyright {
	margin: 0 0 3px;
	font-size: 12px;
	text-align: center;
}
footer .sticky_note {
	padding: 10px 5px 5px 10px;
	margin: -30px 0 0;
}

/*************************************************
 基本パーツデザイン
*************************************************/
/* ***** リンク ***** */
a {
	color: #2879c9;
	text-decoration: underline;
}
a:visited {
	color: #2879c9;
}
a:hover {
	text-decoration: none;
}

/* ***** パンくず ***** */
nav#breadcrumb {
	margin: 5px 0px 5px 5px;
	font-size: 80%;
}
nav#breadcrumb ol {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
nav#breadcrumb li {
	display: inline;
}
nav#breadcrumb li:after {
	content: ">";
	margin: 0 0 0 5px;
	font-size: 70%;
	color: #aaa;
}
nav#breadcrumb li:last-child:after {
	content: none;
}
/* ***** 他 ***** */
strong {
}



/* ---------------------------
 リスト
--------------------------- */
ul,ol {
	margin: 0;
	padding: 0;
}
ul li,
ol li {
	position: relative;
	margin: 0;
	padding: 0;
}
ul.disc {
	list-style: disc;
	padding-left: 2em;
}
ol.decimal {
	list-style: decimal;
	padding-left: 2em;
}
/* ---------------------------
	hrタグ
--------------------------- */
hr {
	width: 100%;
	height: 0px;  /* hrの実線を消す */
	border: 0px;  /* borderを一旦リセットする（基本設定でしていれば不要）*/
	border-top: 1px dotted #bfbfbf;
	clear: both;
}


/*************************************************
 サイトの共通デザイン
*************************************************/
/* -----------------------------------------------
  各種タイトル
------------------------------------------------ */
/* マステ風 */
.title_1{
	display: inline-block;
	font-size: 20px;
	line-height: 100%;
	margin: 10px 0;
	padding: 15px 15px 10px;
	background-image: linear-gradient(-45deg, #e2f7f2 25%, #fff 25%, #fff 50%, #e2f7f2 50%, #e2f7f2 75%, #fff 75%, #fff 100%);
	background-size: 30px 30px;	/* ストライプ幅 */
	border-left: 2px dotted rgba(0,0,0,0.1);
	border-right: 2px dotted rgba(0,0,0,0.1);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	color: #555;
	transform: rotate(0deg);
	opacity: 0.7;
}
@media (min-width: 450px) {
	.title_1{
		padding: 15px 30px 10px;
	}
}
.title_1 img {
	height: 32px;
	background: rgba(255,255,255,0.7);
	border-radius: 4px;
	margin-right: 10px;
	vertical-align: middle;
}
/* 蛍光ペン風 */
.title_2{
	display: inline-block;
	font-size: 20px;
	line-height: 100%;
	margin: 10px 0;
	background: linear-gradient(transparent 65%, #ffe0e3 65%);
	font-weight: bold; 
}

.title_3{
	font-size: 20px;
	line-height: 100%;
	margin: 10px 0;
	font-weight: bold;
	color: #6bc2ac;
}

/* ---------------------------
 付箋風BOX
--------------------------- */
.sticky_note{
	position:relative;
	font-size: 12px;
	margin: 15px 0;
	padding: 15px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	background: #e2f7f2;
}
.sticky_note:before{
	position: absolute;
	content: "";
	bottom: -2px;
	right: 2px;
	width: 50px;
	height: 50px;
	background: linear-gradient(to top left, rgba(0,0,0,0.1) 0%, rgba(100,100,100,0.1) 20%, transparent 50%, transparent 50%);
	-webkit-box-shadow: 5px 5px 8px rgba(0,0,0,0.1);
	-moz-box-shadow: 5px 5px 8px rgba(0,0,0,0.1);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
}
/* カラー */
.c_0 { background: #fff; }

.c_1 { background: #6bc2ac; }
.c_2 { background: #e2f7f2; }

.c_3 { background: #ff98a3; }
.c_4 { background: #ffe0e3; }

.c_5 { background: #f5cc75; }
.c_6 { background: #fff2d7; }

.c_7 { background: #998978; }
.c_8 { background: #f6f6f6; }

.sticky_note .title_2 {
	font-size: 16px;
	background: linear-gradient(transparent 65%, #fff 65%);
}

/* ---------------------------
 refillリスト
--------------------------- */
.refill_list {

}
.refill_list li {
	width: 100px;
}
.refill_list img {
	width: 100%;
}

/* ---------------------------
 normal table
--------------------------- */
table.normal {
	border: 1px solid #ccc;
	font-size: 100%;
}
table.normal th{
	border: 1px solid #ccc;
	background: rgba(200,200,200,0.2);
}
table.normal td {
	border: 1px solid #ccc;
}

/* ***********************************************
 汎用（サイト横展開時も変えない）
*********************************************** */
/* 表示切替 */
.for_sp { display: block; }
.for_pc { display: none; }
@media (min-width: 780px) {
	.for_sp { display: none; }
	.for_pc { display: block; }
}


/* display調整 */
.display_unset {
	display: unset;
}
.display_block {
	display: block;
}
.display_inline {
	display: inline;
}
.display_flex {
	display: flex;
}
.display_none {
	display: none;
}

/* 回り込み・位置設定系 */
.left { float:left!important; }
.right { float:right!important; }
.center { float:none!important;display: block; margin: auto; }


.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

/* 背景だけ横幅フル */
.bg_full {
	width: 100%;
	marign: 0;
	padding: 0;
}
@media (min-width: 780px) {
	.bg_full {
		margin: 0 -200%;
		padding: 0 200%;
		overflow-x: hidden;
	}
}

/* 幅・高さ系 */
.w_100 { width: 100%; }
.w_90 { width: 90%; }
.w_80 { width: 80%; }
.w_70 { width: 70%; }
.w_60 { width: 60%; }
.w_50 { width: 50%; }
.w_40 { width: 40%; }
.w_30 { width: 30%; }
.w_20 { width: 20%; }
.w_10 { width: 10%; }
.w_auto { width: auto; }

.h_100 { height: 100%; }
.h_90 { height: 90%; }
.h_80 { height: 80%; }
.h_70 { height: 70%; }
.h_60 { height: 60%; }
.h_50 { height: 50%; }
.h_40 { height: 40%; }
.h_30 { height: 30%; }
.h_20 { height: 20%; }
.h_10 { height: 10%; }
.h_auto { height: auto; }

/* 画像関連 */
img.full {
	width: 100%!important;
}
img.fifty,
img.forty,
img.thirty,
img.twenty,
img.ten {
	width: 100%;
}

@media (min-width: 768px) {
	img.right {
		margin: 0px 0px 5px 5px;
		float: right;
	}
	img.left {
		margin: 0px 5px 5px 0px;
		float: left;
	}
	img.full {	width: 100%;	}
	img.fifty {	width: 50%;	}
	img.forty {	width: 40%;	}
	img.thirty {	width: 30%;	}
	img.twenty {	width: 20%;	}
	img.ten {	width: 10%;	}
}

@media (min-width: 992px) {
	p img.full {	width: auto!important;	}
}

/* 余白系 */
.mt_0 { margin-top:0px!important; }
.mt_10 { margin-top:10px!important; }
.mt_20 { margin-top:20px!important; }
.mt_30 { margin-top:30px!important; }
.mt_40 { margin-top:40px!important; }
.mt_50 { margin-top:50px!important; }

.mb_-50 { margin-bottom:-50px!important; }
.mb_-40 { margin-bottom:-40px!important; }
.mb_-30 { margin-bottom:-30px!important; }
.mb_-20 { margin-bottom:-20px!important; }
.mb_-10 { margin-bottom:-10px!important; }
.mb_0 { margin-bottom:0px!important; }
.mb_10 { margin-bottom:10px!important; }
.mb_20 { margin-bottom:20px!important; }
.mb_30 { margin-bottom:30px!important; }
.mb_40 { margin-bottom:40px!important; }
.mb_50 { margin-bottom:50px!important; }

/* 回転 */
.deg_-10 { transform: rotate(-10deg); }
.deg_-8 { transform: rotate(-8deg); }
.deg_-6 { transform: rotate(-6deg); }
.deg_-4 { transform: rotate(-4deg); }
.deg_-2 { transform: rotate(-2deg); }
.deg_0 { transform: rotate(0deg); }
.deg_2 { transform: rotate(2deg); }
.deg_4 { transform: rotate(4deg); }
.deg_6 { transform: rotate(6deg); }
.deg_8 { transform: rotate(8deg); }
.deg_10 { transform: rotate(10deg); }