@charset "UTF-8";
@import url(base/reset.css);
/****************************************
common.scss
/****************************************
 common

*****************************************/
.clearfix::after { content: ""; display: block; clear: both; }

.float-l { float: left; }

.float-r { float: right; }

.postion-r { position: relative; }

.postion-a { position: absolute; }

.main-bg { background-color: #eee; }

@media screen and (min-width: 768px) { .ma70 { margin-bottom: 70px; }
  .ma60 { margin-bottom: 60px; }
  .ma55 { margin-bottom: 55px; }
  .ma50 { margin-bottom: 50px; }
  .ma45 { margin-bottom: 45px; }
  .ma40 { margin-bottom: 40px; }
  .ma35 { margin-bottom: 35px; }
  .ma35 { margin-bottom: 35px; }
  .ma30 { margin-bottom: 30px; }
  .ma25 { margin-bottom: 25px; }
  .ma20 { margin-bottom: 20px; }
  .ma15 { margin-bottom: 15px; }
  .ma10 { margin-bottom: 10px; } }
@media screen and (max-width: 767px) { .sp-ma60 { margin-bottom: 60px; }
  .sp-ma55 { margin-bottom: 55px; }
  .sp-ma50 { margin-bottom: 50px; }
  .sp-ma45 { margin-bottom: 45px; }
  .sp-ma40 { margin-bottom: 40px; }
  .sp-ma35 { margin-bottom: 35px; }
  .sp-ma35 { margin-bottom: 35px; }
  .sp-ma30 { margin-bottom: 30px; }
  .sp-ma25 { margin-bottom: 25px; }
  .sp-ma20 { margin-bottom: 20px; }
  .sp-ma15 { margin-bottom: 15px; }
  .sp-ma10 { margin-bottom: 10px; } }
.pc-block { display: block; }
@media screen and (max-width: 767px) { .pc-block { display: none; } }

.sp-block { display: none; }
@media screen and (max-width: 767px) { .sp-block { display: block; } }

/****************************************
 カラム

*****************************************/
.col2-list::after { content: ''; display: block; clear: both; }
.col2-list > * { margin-left: 0; margin-top: 0; float: left; width: calc((100% - 10px) / 2); }
.col2-list > * + *:not(:nth-child(2n+1)) { margin-left: 10px; }
.col2-list > *:not(:nth-child(-n+2)) { margin-top: 10px; }

@media screen and (max-width: 767px) { .col2-list > * { float: none; width: 100%; }
  .col2-list > * + *:not(:nth-child(2n+1)) { margin-left: 0px; } }
.col3-list::after { content: ''; display: block; clear: both; }
.col3-list > * { margin-left: 0; margin-top: 0; float: left; width: calc((100% - 20px) / 3); }
.col3-list > * + *:not(:nth-child(3n+1)) { margin-left: 10px; }
.col3-list > *:not(:nth-child(-n+3)) { margin-top: 10px; }

@media screen and (max-width: 767px) { .col3-list > * { float: none; width: 100%; }
  .col3-list > * + *:not(:nth-child(3n+1)) { margin-left: 0px; } }
.col4-list::after { content: ''; display: block; clear: both; }
.col4-list > * { margin-left: 0; margin-top: 0; float: left; width: calc((100% - 30px) / 4); }
.col4-list > * + *:not(:nth-child(4n+1)) { margin-left: 10px; }
.col4-list > *:not(:nth-child(-n+4)) { margin-top: 10px; }

@media screen and (max-width: 767px) { .col4-list > * { float: none; width: 100%; }
  .col4-list > * + *:not(:nth-child(4n+1)) { margin-left: 0px; } }
/****************************************
 flex

*****************************************/
.flex { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; }
@media screen and (max-width: 767px) { .flex { display: block; } }

@media screen and (max-width: 767px) { .sp-flex { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } }
.flex-ce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
@media screen and (max-width: 767px) { .flex-ce { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-ce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } }
.flex-txt-ce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
@media screen and (max-width: 767px) { .flex-txt-ce { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-txt-ce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } }
.flex-mce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
@media screen and (max-width: 767px) { .flex-mce { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-mce { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } }
.flex-u { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; }
@media screen and (max-width: 767px) { .flex-u { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-u { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-align: end; -moz-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; } }
.flex-t { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; }
@media screen and (max-width: 767px) { .flex-t { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-t { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }
.flex-re { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; flex-direction: row-reverse; }
@media screen and (max-width: 767px) { .flex-re { display: block; } }

@media screen and (max-width: 767px) { .flex-re { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; flex-direction: row-reverse; } }
.flex-ue { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; }
@media screen and (max-width: 767px) { .flex-ue { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-ue { -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; } }
.flex-o { -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -webkit-flex-order: -1; -moz-flex-order: -1; -webkit-order: -1; -moz-order: -1; order: -1; }
@media screen and (max-width: 767px) { .flex-o { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-o { -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -webkit-flex-order: -1; -moz-flex-order: -1; -webkit-order: -1; -moz-order: -1; order: -1; } }
.flex-rt { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; flex-direction: column-reverse; }
@media screen and (max-width: 767px) { .flex-rt { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-rt { display: -webkit-box; display: -moz-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-direction: reverse; -moz-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; flex-direction: column-reverse; } }
.flex-r { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }
@media screen and (max-width: 767px) { .flex-r { display: block; } }

@media screen and (max-width: 767px) { .sp-flex-r { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } }
@media screen and (max-width: 767px) and (max-width: 767px) { .sp-flex-r { display: block; } }

/****************************************
 Typography

*****************************************/
html { font-size: 62.5%; }

body { font-size: 1.45rem; line-height: 1.8; color: #000; font-family: "Lora", serif; }

* { font-family: inherit; font-size: inherit; line-height: inherit; }

a, a:visited { color: inherit; }

address { font-style: normal; }

p, .text { line-height: 2.2; }

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

.text-right { text-align: right; }

/****************************************
 button

*****************************************/
/* Remove text-shadow in selection highlight: h5bp.com/i These selection rule sets have to be separate. Customize the background color to match your design. */
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/* Remove the gap between images, videos, audio and canvas and the bottom of their containers: h5bp.com/i/440 */
audio, canvas, img, video { vertical-align: middle; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; vertical-align: top; }

label, select, input[type=submit] { cursor: pointer; }

/****************************************
 link

*****************************************/
a:hover, a:focus, a:active { transition: all 0.8s ease 0s; }

img { max-width: 100%; max-height: 100%; width: auto; height: auto; vertical-align: top; font-size: 0; line-height: 0; }

/****************************************

thumb hover effect

*****************************************/
.thumb_hover_anime { overflow: hidden; position: relative; opacity: 1; }
.thumb_hover_anime img { transform-origin: top right; transition: transform 1s cubic-bezier(0.42, 0, 0.17, 1.01); transform: translate3d(-20px, 0, 0); }
.thumb_hover_anime:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 101%; background-color: white; z-index: 1; transition: transform 1s cubic-bezier(0.42, 0, 0.17, 1.01); transform-origin: top right; }
.thumb_hover_anime.thumb_green_bg::after { background: #eee; }

.animated.thumb_hover_anime img { transform: translate3d(0, 0, 0); }
.animated.thumb_hover_anime:after { transform: scale(0, 1); }

/****************************************

loading effect

*****************************************/
.loadingAnim { position: fixed; z-index: 999; top: 0; bottom: 0; right: 0; display: block; width: 100%; height: 100%; text-align: center; }

/*.loadingAnim:before,*/
.loadingAnim:after { line-height: 1; position: fixed; z-index: 99; top: 0; bottom: 0; display: block; width: 101%; height: 100%; margin-right: auto; margin-left: auto; content: ' '; transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; transition-delay: 0; background-color: #D7E0DC; }

.first.loadingAnim:after { transition-delay: .3s; }

.loadingAnim:after { right: -1%; }

.loaded .loadingAnim:after { width: 0; -webkit-transform: translateX(-1%); -ms-transform: translateX(-1%); transform: translateX(-1%); }

.loadingAnim_line { line-height: 1; position: fixed; z-index: 100; top: 0; right: -1%; display: inline-block; overflow: hidden; width: 101%; height: 10px; margin: auto; transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s; text-align: center; background: black; }

.loaded .loadingAnim_line { overflow: hidden; width: 0; }

.loadingAnim_line { background: none; }

.loaded .loadingAnim_line:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: black; }

#body_wrapper { opacity: 0; }

.loaded #body_wrapper { opacity: 1; }

.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.pace .pace-progress-inner, .pace .pace-activity, .pace-inactive { display: none !important; }

.pace .pace-progress { background: black !important; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 10px !important; }

/********************
animation setting
********************/
@-webkit-keyframes loadingAnim { 0% { width: 100%; -webkit-transform: translate(100%); transform: translate(100%); }
  100% { width: 0%; -webkit-transform: translate(0); transform: translate(0); } }
@keyframes loadingAnim { 0% { width: 100%; -webkit-transform: translate(100%); transform: translate(100%); }
  100% { width: 0%; -webkit-transform: translate(0); transform: translate(0); } }
@media screen and (min-width: 768px) { body { min-width: 1020px; } }
.center { margin: auto; }
@media screen and (min-width: 768px) { .center { width: 980px; } }
@media screen and (max-width: 767px) { .center { width: 90%; } }

.top_img { height: 2000px; background: url(../img/top/pic1.jpg) no-repeat center; background-size: cover; }
.top_img h1, .top_img h2 { display: block; color: white; letter-spacing: .08em; text-align: center; }
.top_img h1 { font-size: 300%; line-height: 130%; }
@media screen and (min-width: 768px) { .top_img h1 { margin-bottom: 20px; } }
@media screen and (max-width: 767px) { .top_img h1 { margin-bottom: 30px; } }
.top_img h2 { font-size: 150%; line-height: 150%; }

h3 { padding: 100px 0; text-align: center; font-size: 150%; }

h4 { background: black; color: white; padding: 100px 0; text-align: center; font-size: 150%; }
h4 span { display: inline-block; }

h4 + img { width: 100%; height: auto; }

.pic { align-items: flex-start; }
.pic img { width: 50%; }

.profile { align-items: flex-start; padding: 120px 0; }
@media screen and (min-width: 768px) { .profile img { width: 400px; margin-right: 80px; } }
@media screen and (max-width: 767px) { .profile img { max-width: 70%; display: block; margin: 40px auto 0; } }
@media screen and (min-width: 768px) { .profile .cont { width: 500px; } }
.profile h1 { margin-bottom: 30px; font-size: 150%; }
.profile h2 { margin: 40px auto 20px; font-size: 110%; }

footer { background: black; color: white; text-align: center; padding: 80px 0 50px; }
footer b { margin: 0px auto 20px; display: block; font-size: 110%; }
footer a + p { margin: 80px auto; }
footer .tagashira img { margin: 10px auto 20px; max-width: 80px; height: auto; }
footer .copyright { line-height: 150%; }

.profile {
    padding-bottom: 60px;
}
.banner {
	width: 90%;
	max-width: 600px;
	margin: 0 auto 100px;
	text-align: center;
}
.banner a {
	display: inline-block;
	transition: all 0.35s;
}
.banner a:hover {
	opacity: 0.6;
}