@charset "UTF-8";
/*
Theme Name: Contents Note
Template: twentynineteen
Author: Contents Note
Author URI: 
Description:
Version: 1.0
Updated: 2022-09-01
*/

/* Color Scheme
-----------------------------------------------------

	=THEME COLOR = #ccc5a8

-----------------------------------------------------
*/

@import url(reset.css);
@import url(wordpress.css);
@import url(ownedmedia.css);


/*
-----------------------------------------------------

 	=GLOBAL LAYOUT

-----------------------------------------------------
*/

* {
	margin: 0; padding: 0;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	     -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}

html {
	font-family: brother-1816, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif, serif;
	-webkit-font-smoothing: antialiased !important;
	-webkit-text-stroke: 1px transparent;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	color: #333;
	font-size: 10px;
	font-weight: normal;
	line-height: 1.8;
	word-wrap: break-word;
	letter-spacing: 0.00em;
}
/* Firefox
@-moz-document url-prefix() {
	html {
		font-family: brother-1816, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif, serif;
	}
} */
/* IE11 */
_:-ms-lang(x)::-ms-backdrop, html {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif, serif;
}

body{
	background-color: #fff;
	font-size: 1.6rem;
}
h1, h2, h3, h4, h5, h6, p, pre, dt, dd, li {
	line-height: 2.0;
}
p, ul, ol, dl, table {
	margin-bottom: 2em;
}
p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child {
	margin-bottom: 0;
}
table {
	width: 100%;
	border-collapse: collapse;
	line-height: 1.8;
	text-align: left;
}
th, td {
	padding: 1em 1.5em;
	vertical-align: top;
	border: none;
}
th {
	font-weight: bold;
	text-align: justify;
}
tr {
	border-bottom: solid 1px rgba(0,0,0,0.1);
}

hr {
	clear: both;
	border: none;
}
img {
	display: inline-block;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
a img {
	border: none;
}
a {
	color: #ccc5a8;
	text-decoration: underline;
}
a,
a img {
	cursor: pointer;
	-webkit-transition: all ease-out 0.2s;
	   -moz-transition: all ease-out 0.2s;
	    -ms-transition: all ease-out 0.2s;
	        transition: all ease-out 0.2s;
}
a:hover {
	opacity: 0.5;
	text-decoration: none;
}
/*::selection {
	background-color: rgba(0,0,0,0.25);
}*/

em {}

ol{
	counter-reset: number;
	list-style: none;
}
ol li {
	position: relative;
	padding-left: 2.5em;
}
ol li:not( :last-child ) {
	margin-bottom: 1.5em;
}
ol li::before {
	position: absolute;
	left: 0;
	counter-increment: number;
	content: "("counter(number)")";
	margin: 0 1.0em 0 0;
}
ol li ol:last-child { margin-bottom: 2em; }
ol li ol li::before {
	content: "("counter(number,lower-roman)")";
}
ol li ol li:not( :last-child ) {
	margin-bottom: .5em;
}


strong { font-weight: bold; }
iframe { display: block; max-width: 100%;}
form {}
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
textarea {
	padding: 5px;
	font-size: 16px;
	font-weight: inherit;
	color: inherit;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
textarea,
select {
	background-color: #eee;
	color: #555;
	border: 1px solid #eee;
	line-height: 1;
	vertical-align: middle;
	max-width: 100%;
	border-radius: 5px;
}
textarea {}
input[type=text] { margin-bottom: 0.5em; }
input[type=text]:last-child { margin-bottom: 0; }
input[type=email] {}
input[type=submit] { cursor: pointer;}
input[type=text]:focus,
textarea:focus {
	color: #555;
}
form ul { margin: 0 !important; padding: 0 !important; border: none !important;}
form ul li { display: inline-block !important;}
form label { margin-right: 1.4em;}
form input[type*="submit"] {
	display: block;
	width: 100%;
	max-width: 300px;
	margin: 0 auto 20px;
	padding: 1em 2em;
	border: none;
	background-color: #e45539;
	color: #fff;
	font-size: 1.0em;
	font-weight: bold;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translate3d(0,0,0);
	    -ms-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);
	-webkit-transition: all ease-out 0.1s;
	   -moz-transition: all ease-out 0.1s;
	    -ms-transition: all ease-out 0.1s;
	        transition: all ease-out 0.1s;
}
form input[type*="submit"]:hover {
	opacity: 0.7;
}
::placeholder {
	color: #ddd;
}



/*
-----------------------------------------------------

 	=GLOBAL STYLE

-----------------------------------------------------
*/

#container {
	overflow: hidden;
}

.wrapper {
	width: 1200px;
	max-width: 100%;
	margin: auto;
}
.wrapper-min { width: 800px;}
.wrapper-1120 { width: 1120px;}
.wrapper-1000 { width: 1000px;}
.wrapper-960 { width: 960px;}
.wrapper-800 { width: 800px;}
.wrapper-720 { width: 720px;}

#cont {}
#main {}
#main main {}


/*
-----------------------------------------------------

	=MEDIA QUERIES RESPONSIVE STRUCTURE

-----------------------------------------------------
*/

/* DESKTOP
----------------------------------------------------- */
@media screen and (min-width: 600px) {
	.sp { display: none !important; }

	body {
		min-width: 1200px;
	}
}

/* SMARTPHONE
----------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 599px) {
	.pc { display: none !important;}

	html { 
		font-size: 10px; 
	}
	body { 
		font-size: 1.2rem; 
		letter-spacing: 0;
	}

	/* APPERANCE
	--------------------------------------------------*/
	input[type="button"],
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="submit"],
	select {
		-webkit-appearance: none;
		border-radius: 0;
	}
/*
	iframe {
		width: 100%; 
		max-height: 240px;
	}
*/
	th, td {
		font-size: 1.2rem;
		padding: 1em 0.5em;
	}

	/* =GLOBAL STYLE
	-------------------------------------------------- */
	.wrapper {
		width: auto;
		padding: 0 6.25vw;
		margin: auto;
	}
}


/*
-----------------------------------------------------

 	=PRELOADER (imagesloaded.pkgd.min.js)

-----------------------------------------------------
*/

.js-imageloaded {}
.js-imageloaded.loaded {}

#progress,
#progress * {}
#progress{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:100%;
    height:100vh;
    padding:0;
    display:block;
    overflow:hidden;
    z-index:999999;
}
#progress .progress-start {
    background-color:#000;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    z-index:999999
	-webkit-transition: all cubic-bezier(0.230, 1.000, 0.320, 1.000) 1.2s;
	   -moz-transition: all cubic-bezier(0.230, 1.000, 0.320, 1.000) 1.2s;
	    -ms-transition: all cubic-bezier(0.230, 1.000, 0.320, 1.000) 1.2s;
	        transition: all cubic-bezier(0.230, 1.000, 0.320, 1.000) 1.2s;
}
#progress.complete10 .progress-start { left: -100%; }
#progress .progress-loading {
    background-color: #000000;
    background-color: #fff;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    z-index:999999;
}
#progress .progress-loading img {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
	-webkit-transition: all cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.8s;
	   -moz-transition: all cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.8s;
	    -ms-transition: all cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.8s;
	        transition: all cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.8s;

    width: 330px;
    height: auto;
}
#progress,
#progress .progress-loading {
	-webkit-transition: all cubic-bezier(0.550, 0.055, 0.675, 0.190) 0.6s;
	   -moz-transition: all cubic-bezier(0.550, 0.055, 0.675, 0.190) 0.6s;
	    -ms-transition: all cubic-bezier(0.550, 0.055, 0.675, 0.190) 0.6s;
	        transition: all cubic-bezier(0.550, 0.055, 0.675, 0.190) 0.6s;
}
#progress.complete100,
#progress.complete100 .progress-loading {
	left: -120%;
}
#progress.complete99 .progress-loading img {
	opacity: 0;
	top: 48%;
}

@media screen and (min-width: 0px) and (max-width: 599px) {

	@supports (-webkit-touch-callout: none) {
	  #progress {
	    height: -webkit-fill-available;
	  }
	}
	#progress .progress-loading img  {
		width: 150px;
	}
}



/* =ANIMATION (jquery.inview.js)
----------------------------------------------------- */
.js-inview {
    transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -webkit-transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -moz-transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -ms-transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -o-transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
}

.js-inview.inview-zoom {
    transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
    -o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;

    opacity: 0;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}
.js-inview.inview-zoom.is-show {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.js-inview.inview-blur {
    opacity: 0;
    filter: blur(100px);
    -webkit-filter: blur(100px);
    -moz-filter: blur(100px);
    -ms-filter: blur(100px);
    -o-filter: blur(100px);
}
.js-inview.inview-blur.is-show {
    opacity: 1;
    filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -ms-filter: blur(0);
    -o-filter: blur(0);
}

.js-inview.inview-floatup {
    transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
    -webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
    -moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
    -ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
    -o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;

    opacity: 0;
    transform: translate3d(0px, 200px, 0px);
    -webkit-transform: translate3d(0px, 200px, 0px);
    -moz-transform: translate3d(0px, 200px, 0px);
    -ms-transform: translate3d(0px, 200px, 0px);
    -o-transform: translate3d(0px, 200px, 0px);
}
.js-inview.inview-floatup.is-show {
    opacity: 1;
    transform: translate3d(0px, 0, 0px);
    -webkit-transform: translate3d(0px, 0, 0px);
    -moz-transform: translate3d(0px, 0, 0px);
    -ms-transform: translate3d(0px, 0, 0px);
    -o-transform: translate3d(0px, 0, 0px);
}
.js-inview.inview-floatintoright {
    transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    -webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    -moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    -ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    -o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;

    opacity: 0;
    transform: translate3d(-40px, 0px, 0px);
    -webkit-transform: translate3d(-40px, 0px, 0px);
    -moz-transform: translate3d(-40px, 0px, 0px);
    -ms-transform: translate3d(-40px, 0px, 0px);
    -o-transform: translate3d(-40px, 0px, 0px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}
.js-inview.inview-floatintoright.is-show {
    opacity: 1;
    transform: translate3d(0px, 0, 0px);
    -webkit-transform: translate3d(0px, 0, 0px);
    -moz-transform: translate3d(0px, 0, 0px);
    -ms-transform: translate3d(0px, 0, 0px);
    -o-transform: translate3d(0px, 0, 0px);
}
.js-inview.inview-floatintoleft {
    transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    -webkit-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    -moz-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    -ms-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
    -o-transition: 1.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;

    opacity: 0;
    transform: translate3d(40px, 0px, 0px);
    -webkit-transform: translate3d(40px, 0px, 0px);
    -moz-transform: translate3d(40px, 0px, 0px);
    -ms-transform: translate3d(40px, 0px, 0px);
    -o-transform: translate3d(40px, 0px, 0px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}
.js-inview.inview-floatintoleft.is-show {
    opacity: 1;
    transform: translate3d(0px, 0, 0px);
    -webkit-transform: translate3d(0px, 0, 0px);
    -moz-transform: translate3d(0px, 0, 0px);
    -ms-transform: translate3d(0px, 0, 0px);
    -o-transform: translate3d(0px, 0, 0px);
}



.js-inview.inview-slideintoright {
	display: block;
    width: 1%;
}
.js-inview.inview-slideintoright.is-show {
    width: 100%;
}

.js-inview.inview-grayscale {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
.js-inview.inview-grayscale.is-show {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	filter: grayscale(0%);
}

.inview-slidein-wrap {
    overflow: hidden;
    display: inline-block;
}
.js-inview.inview-slidein {
	transform: translateX(-100%);
}
.js-inview.inview-slidein.is-show {
	animation-name: animationSlideText;
	animation-duration: 0.6s;
	animation-fill-mode:forwards;

}

@keyframes animationSlideText {
	0%{
		transform: translateX(-100%);
	}
	50%{
		transform: translateX(-100%);
	}
	100%{
		transform: translateX(0);
	}
}
.js-inview.inview-slideinreverse {
	transform: translateX(100%);
}
.js-inview.inview-slideinreverse.is-show {
	animation-name: animationSlideTextReverse;
	animation-duration: 0.6s;
	animation-fill-mode:forwards;
}

@keyframes animationSlideTextReverse {
	0%{
		transform: translateX(100%);
	}
	50%{
		transform: translateX(100%);
	}
	100%{
		transform: translateX(0);
	}
}

@media screen and (min-width: 0px) and (max-width: 599px) {
	.inview-slidein-wrap {
		width: 100%;
	}
}

/*
-----------------------------------------------------

	=COMMON PARTS

-----------------------------------------------------
*/


/* =SECTION
----------------------------------------------------- */

.block:not( :last-child ) {
	margin-bottom: 120px;
}
.section {
	padding: 120px 0;
}

hr {
	clear: both;
	border: none;
	height: 60px;
}
hr.hr-border {
	margin: 2em 0;
	height: 1px;
	background-color: #dcdcdc;
}

.section-header {
	text-align: center;
}

@media screen and (min-width: 0px) and (max-width: 599px) {
	.block:not( :last-child ) {
		margin: 0 auto 8vw;
	}
	.section {
		padding: 8vw 0;
	}
	hr { height: 8vw; }
}


/* =DECORATION
----------------------------------------------------- */
.bg-white { background-color: #fff; }
.bg-gray { background-color: #f6f6f6; }

.fc-theme {
	color: #ccc5a8;
}
.fc-white { color: #fff }

.frame {
	padding: 2.0em;
}

@media screen and (min-width: 0px) and (max-width: 599px) {
	.frame {
		padding: 6.25vw;
	}
}


/* =HEADING
----------------------------------------------------- */
.title-bar {
	margin: 0 0 1.35em;
	border-bottom: solid 1px #dcdcdc;
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1.5;
}
.title-bar span {
	padding: 0 0 0.5em;
	display: inline-block;
	margin-bottom: -1px;
	border-bottom: solid 3px #ccc5a8;
}

.title-24 {
	margin: 0 0 1.05em;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.5;
}

.title-back {
	margin: 0 0 2.0em;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #f2f2f2;
	padding: 0.35em 1em;
}


@media screen and (min-width: 600px) {
}

@media screen and (min-width: 0px) and (max-width: 599px) {
	.title-bar {
		font-size: 1.9rem;
	}
	.title-24 {
		font-size: 1.9rem;
	}
}


/* =BUTTON
----------------------------------------------------- */
.button-more {
  position: relative;
  display: inline-block;
  padding: 0 2em;
  width: auto;
  max-width: 100%;
  height: 48px;
  line-height: 48px;
  border: solid 1px #ccc5a8;
  background-color: #ccc5a8;
  color: #fff;
  font-family: "brother-1816", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 1px;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box
}

.button-more::before {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #fff;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s
}
.button-more:hover {
	opacity: 1;
	color: #ccc5a8;
}
.button-more:hover:before {
  width: 100%
}

.button-more span {
  position: relative;
  z-index: 2;
}

	.button-more.black {
		border-color: #333;
		background-color: #333;
		color: #fff;
	}
	.button-more.black:hover {
		color: #333;
	}

	.button-more.yellow {
		border-color: #f4af47;
		background-color: #f4af47;
		color: #000;
	}
	.button-more.yellow:hover {
		color: #f4af47;
	}


@media screen and (min-width: 600px) {
	.button-more {
		width: 320px;
		max-width: 100%;
	}
	.button-more.large {
		width: 480px;
		height: 70px;
		line-height: 70px;
		font-size: 1.2em;
	}
}

@media screen and (min-width: 0px) and (max-width: 599px) {
	.button-more {
		font-size: 1.2em;
		padding: 0.0em 1.5em;
		height: 48px;
		line-height: 48px;
	}
	.button-more::before {}
}


/* =OTHER
----------------------------------------------------- */