/*
Theme Name: Ken'ichiro Taniguchi 1.0
Template: habakiri
*/

body {
    line-height: 1.8em;
    font-family: din-2014, sans-serif;
    font-weight:300;
    font-style: normal;
    text-align: justify;
    text-justify: inter-ideograph;
}

p, ul, ol, dl, table {
    letter-spacing: 0.05em;
}


h1, h2, h3, h4 {
    font-family: din-2014, sans-serif;
    font-weight:300;
    font-style: normal;
}

.italic {
	font-style: italic;
}

hr {
	border: 1.5px #f1f1f1 solid;
}

@media screen and (max-width: 479px) {
body {
    line-height: 1.7em;
}
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}


.img-responsive {
	margin:0 auto;
}
.w80 {
	width: 80%;
	margin:0 auto;
}
/*==================================================
 * タイトルを非表示に
 *================================================*/
h1.entry__title{
display:none;
}


h1, h2, h3, h4 {
    font-family: din-2014, sans-serif;
    font-weight: 600;
    font-style: normal;
}

h1, .h1 {
    font-size: 24px;
}

h1.entry-title {
	margin-top: 0;
	padding-top: 0;
}

h2, .h2 {
    font-size: 22px;
}

h2 span {
    font-size: 0.6em;
}

h2.black {
	color: black;
}

h3, .h3 {
    font-size: 20px;
}

h4, .h4 {
    font-size: 18px;
}

h4 span {
    font-size: 0.8em;
    font-weight: 300;
    padding-left: 5px;
}

h1.entry__title {
    color: #ffdb43 
}

article.content section {
	margin-bottom: 25px;
}

.content h1, .content h2, .content h3, .content h4 {
    margin-bottom: 10px;
    margin-top: 0;
}
.content h1 {
    font-style: italic;
}
.content h2 {
    font-size: 17px;
}
.content h1 span {
	font-style: normal;
    font-size: 16px;
}
.content h2 span {
    font-size: 13px;
    padding-left: 10px;
}

.content ul {
    padding-left: 0;
}

.content ul li {
    list-style-type: none;
}

.content hr {
	border: 1.5px #f1f1f1 solid;
	margin: 50px 0;
}

.sub-page-contents {
	padding-top: 0;
}

.CSP h1 {
	font-size: 22px;
}
.CSP h2 {
	font-size: 16px;
}


@media screen and (max-width: 979px) {
.sub-page-contents {
	padding-top: 80px;
}
}
@media screen and (max-width: 479px) {
h1.entry-title {
	font-size: 20px;
}
}

@media screen and (max-width: 479px) {
.content h1, .content h2, .content h3, .content h4 {
    line-height: 1em;
}
.content h2 {
    font-size: 16px;
}
.content h1 span {
	font-style: normal;
    font-size: 13px;
    padding-left: 0px;
}
.content h2 span {
    font-size: 10px;
    padding-left: 0px;
}
.CSP h1 {
	font-size: 22px;
	line-height: 1em;
	margin: 0;
	padding: 0;
}
.CSP h2 {
	font-size: 13px;
	line-height: 1em;
	margin: 0;
	padding: 0;
}
}

/*==================================================
caption
 *================================================*/
.w-caption {
	right: 25px;
	color: white;
	position: absolute;
	bottom: 5px;
	font-size: 0.7em;
	line-height: 1.5em;
}

.w-caption-b {
	right: 25px;
	color: black;
	position: absolute;
	bottom: 5px;
	font-size: 0.7em;
	line-height: 1.5em;
}

@media screen and (max-width: 479px) {
.slider-caption, .slider-caption-b {
	font-size: 0.6em;
}
.w-caption {
	width: 80%;
	left: 10px;
	color: white;
	position: absolute;
	bottom: 5px;
	font-size: 0.6em;
	line-height: 1.3em;
}
.w-caption-b {
	width: 80%;
	left: 10px;
	color: black;
	position: absolute;
	bottom: 5px;
	font-size: 0.6em;
	line-height: 1.3em;
}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
.w-caption {
	left: 20px;
	color: white;
	position: absolute;
	bottom: 5px;
	font-size: 0.6em;
	line-height: 1.3em;
}

.w-caption-b {
	left: 20px;
	color: black;
	position: absolute;
	bottom: 5px;
	font-size: 0.6em;
	line-height: 1.3em;
}
}

.slider-caption {
	padding-right: 10px;
	right: 0px;
	color: white;
	position: absolute;
	bottom: 0;
	font-size: 0.7em;
}

.slider-caption-b {
	padding-right: 10px;
	right: 0px;
	color: black;
	position: absolute;
	bottom: 0;
	font-size: 0.7em;
}

@media screen and (max-width: 479px) {
.slider-caption, .slider-caption-b {
	font-size: 0.6em;
	line-height: 1.3em;
	padding-bottom: 5px;
}
}

.caption {
	font-size: 0.85em;
	color: #999797;
	letter-spacing: 0;
	padding-top: 5px;
	line-height: 1.5em
}

.caption2 {
	font-size: 0.7em;
	letter-spacing: 0;
	padding-top: 20px;
	line-height: 1.5em
}

.caption3 {
	font-size: 0.7em;
	letter-spacing: 0;
	padding-top: 0px;
	margin-top: -15px;
	line-height: 1.5em
}

.note {
	font-size: 0.85em;
	line-height: 1.5em
}

/*==================================================
.content h1 {
    line-height: 1.5em;
    padding: 10px;
    background-color: rgba( 255, 255, 255, 0.8 );
    position: absolute;
    margin:0;
    z-index: 2;
}
 *================================================*/
.content img {
}





@media screen and (min-width: 980px) {
.gallery-size-thumbnail {
	margin-left: -15px;
	margin-right: -15px;
}
}

/*==================================================
 * 「パソコン」「スマホ」で表示内容を切り替え
 *================================================*/
.pc-dsp { display:block; }
.sp-dsp { display:none; }

@media only screen and (max-width : 736px){
.pc-dsp { display:none; }
.sp-dsp { display:block; }
}


/*==================================================
 * containerを970pxに(もとはwidth: 1170px;)

@media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}
 *================================================*/

/** * リンク画像のみ半透明に */
a:hover img {
opacity:0.4;
filter:alpha(opacity=40);
-ms-filter: "alpha( opacity=40 )";
-webkit-transition:all 0.25s linear;
-moz-transition:all 0.25s linear;
transition:all 0.25s linear;
}


/*==================================================
 * headerとfooterの影を消す
 *================================================*/

#container, #header {
  box-shadow: none;
}

#container {
  box-shadow: none;
}



/* ==========================================================================
   パソコンで見たときは"pc"のclassがついた画像が表示される
   ========================================================================== */
.pc { display: block !important; }
.sp { display: none !important; }
/* ==========================================================================
   スマートフォンで見たときは"sp"のclassがついた画像が表示される
   ========================================================================== */
@media only screen and (max-width: 979px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
/* ==========================================================================
   スマートフォン、タブレットで非表示
   ========================================================================== */
@media only screen and (min-width: 0px)
and (max-width: 760px){
  .pc-only { display: none !important; }
}

@media screen and (min-width: 980px) {
ここにCSSを指定
}　/* パソコン表示 */
@media screen and (min-width: 768px) and (max-width: 979px) {
ここにCSSを指定
}　/* タブレット端末表示 */
@media screen and (max-width: 479px) {
ここにCSSを指定
}　/* スマホ表示 */




.HMpc { display: block !important; }
.HMsp { display: none !important; }

@media only screen and (max-width: 479px) {
.HMpc { display: none !important; }
.HMsp { display: block !important; }
}



/*==================================================
 * header
 *================================================*/
#header {
	padding-top: 10px;
	padding-bottom: 10px;
}

.global-nav {
    letter-spacing: 0.1em;
    font-family: din-2014, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.site-branding__heading {
    border-style: none;
    border-width: 0px;
    margin: 0;
}

.site-branding a {
    text-decoration: none;
}


/*==================================================
 * footer
 *================================================*/
.copyright {
    padding-bottom: 50px;
    text-align: left;
    background-color: #ffffff;
    font-size: 0.7em;
    letter-spacing: 0.1em;
    color: #646464;
}

.front-page-copyright {
    padding-bottom: 10px;
    text-align: center;
    background-color: #ffffff;
    font-size: 0.7em;
    letter-spacing: 0.1em;
    color: #646464;
}

.copyright a, .front-page-copyright a {
    color: #646464;
}

/*==================================================
 * sidebar
 *================================================*/
ul#menu-news-page-menu li {
	list-style-type: none;
	margin-left: 0px;
}

.current-menu-item a, .current-page-ancestor a {
	color: #ffdb43 !important;
}

/*==================================================
 * front-page
 *================================================*/
@media screen and (min-width: 980px) {
.front-page.container-fluid {
	width: 1000px;
}
}

.boxContainer {
  display: flex;
}
.boxContainer .linkbox {
  margin: 15px;
}
@media screen and (max-width: 479px) {
.front-page .slider {
	margin-top: 0px;
}
.front-page.container-fluid .slider {
	margin-left: -15px;
	margin-right: -15px;
}
.boxContainer .linkbox {
  margin: 5px;
}
}
@media screen and (min-width: 980px) {
.lbwrap {
	margin: 0 -15px;
}
}


.linkbox {
    position: relative;
    margin-bottom: 20px;
}

.linkbox p {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.1em;
    text-align: center;
    padding-left: 5px;
    padding-bottom: 2px;
    padding-right: 5px;
    padding-top: 2px;
    background-color: rgba( 255, 255, 255, 0.75 );
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
}

.linkbox a {
    color: #5c5c5c;
}
/*==================================================
 * 文字に白縁をつける場合
 .linkbox a {
    color: #767676;
    text-shadow:1px 0 1px white,0 1px 1px white,-1px 0 1px white,0 -1px 1px white;
}
 *================================================*/
.linkbox .current {
    background-color: rgba( 25, 25, 112, 0.8 );
    color: white;
}
.linkbox img {
    width: 100%;
}

.linkbox h2 {
    line-height: 1.5em;
    padding: 20px;
    background-color: rgba( 255, 255, 255, 0.6 );
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
}

@media screen and (max-width: 479px) {
.linkbox h2 {
	font-size: 0.9em;
    line-height: 1.3em;
    padding: 10px;
    background-color: rgba( 255, 255, 255, 0.6 );
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
}
}

@media only screen and (max-width: 640px) {
.linkbox p {
    line-height: 1em;
    font-size: 0.9em;
    padding-left: 0;
    padding-bottom: 2px;
    padding-right: 0;
    padding-top: 2px;
}
}

.slider {
	margin-bottom: 50px;	
}
@media screen and (max-width: 479px) {
.slider {
	margin-bottom: 30px;
	margin-top: 25px;
}
.slick-dots li{
	    margin: 0!important;
	}
}

.slick-dots li button:before {
    color: #a5a5a5;
}
.slider .slick-arrow_prev,
.slider .slick-arrow_next,
.full .slick-arrow_prev,
.full .slick-arrow_next  {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
}
.slider .slick-arrow_prev {
  left: 10px;
}
.slider .slick-arrow_next {
  right: 10px;
}
.full .slick-arrow_prev {
  left: 25px;
}
.full .slick-arrow_next {
  right: 25px;
}

/*==================================================
slider
 *================================================*/
.slider{
  opacity: 0;
  transition: opacity .3s linear;
}
.slider.slick-initialized{
  opacity: 1;
}

/*==================================================
 * Hecomi Study + City Study ページのフッターリンクメニュー
 *================================================*/
.footer_link {
    padding-right: 10%;
    padding-left: 10%;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba( 200, 200, 200, 0.8 );
	z-index: 10000;
}

.footer_link p {
    padding-top: 15px;
    padding-bottom: 5px;
    line-height: 1em;
    text-align: center;
    font-family: din-2014, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.2em;
}

.footer_link a {
	color: white;
}

.footer_link a:hover {
	color: white;
}

@media screen and (min-width: 768px) and (max-width: 979px) {
.footer_link {
    padding-right: 0%;
    padding-left: 0%;
}

.footer_link p {
    padding-top: 10px;
    padding-bottom: 0px;
    line-height: 1em;
    text-align: center;
    font-family: din-2014, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1em;
}
}

@media screen and (max-width: 479px) {
.footer_link p {
    padding-top: 10px;
    padding-bottom: 0;
    line-height: 1em;
    text-align: center;
    font-family: din-2014, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.9em;
}
}

/*==================================================
 * CV page
 *================================================*/
.cv h2 {
	margin: 0;
	padding: 0;
}
.cv span {
	margin-top: 50px;
}
.cv b {
	font-size: 19px;
}
.cv p {
	font-size: 0.9em;
}

@media screen and (min-width: 980px) {
.cv img {
	margin-top: 50px;
	margin-bottom: 25px;
}
}

dl.cv {
	margin-bottom: 50px;
}

dl.cv dt {
	padding-bottom: 5px;
	font-style: normal;
	font-weight: normal;
	float: left;
}

dl.cv dd {
	padding-bottom: 5px;
	margin-left: 100px;
}

.box-gray3 {
	background-color: #f9f9f9;
	padding: 25px 15px 15px 15px;
	margin-bottom: 10px;
	line-height: 1.5em;
}
.box-gray3 span {
	font-weight: 400;
	font-size: 1.1em;
	font-style: italic;
}
.box-gray3 p {
	font-size: 0.9em;
}
.box-gray3 hr {
	border: 1px #f1f1f1 solid;
}

@media screen and (max-width: 479px) {
dl .cv dd {
	text-justify: none !important;
}
dl.cv dd {
	line-height: 1.3em;
	padding-bottom: 15px;
	margin-left: 0;
}
dl.cv dt {
	padding-bottom: 0;
	float: none;
}
}


/*==================================================
 * Selected Text
 *================================================*/
::selection {
	background:#ffdb43; /* Safari */
}

::-moz-selection {
	background:#ffdb43; /* Firefox */
}


/*==================================================
 * カスタムフィールド

.post-meta {padding: 0px; margin: 0px; line-height: 2em; font-size: 12px; letter-spacing: 0.1em; list-style-type: none; }
.post-meta-key { padding: 0px; margin: 0px; float: left; visibility: hidden; font-size: 0%; }



 * archive

ul.postlist .home_post {
	margin-left: 10px;
	margin-bottom: 20px;
	margin-right: 10px;
	padding: 10px;
	background-color: white;
	float: left;
	list-style-type: none;
}
 *================================================*/










/*==================================================
 * margin、padding
 *================================================*/
.m-b-0 {margin-bottom: 0px;}
.m-b-5 {margin-bottom: 5px;}
.m-b-10 {margin-bottom: 10px;}
.m-b-15 {margin-bottom: 15px;}
.m-b-20 {margin-bottom: 20px;}
.m-b-25 {margin-bottom: 25px;}
.m-b-30 {margin-bottom: 30px;}
.m-b-50 {margin-bottom: 50px;}
.m-b-75 {margin-bottom: 75px;}
.m-b-100 {margin-bottom: 100px;}
.m-t--20 {margin-top: -20px;}
.m-t-0 {margin-top: 0px;}
.m-t-5 {margin-top: 5px;}
.m-t-10 {margin-top: 10px;}
.m-t-15 {margin-top: 15px;}
.m-t-20 {margin-top: 20px;}
.m-t-25 {margin-top: 25px;}
.m-t-30 {margin-top: 30px;}
.m-t-50 {margin-top: 50px;}
.m-t-75 {margin-top: 75px;}
.m-t-100 {margin-top: 100px;}
.p-b-0 {padding-bottom: 0px;}
.p-b-5 {padding-bottom: 5px;}
.p-b-10 {padding-bottom: 10px;}
.p-b-15 {padding-bottom: 15px;}
.p-b-20 {padding-bottom: 20px;}
.p-b-25 {padding-bottom: 25px;}
.p-b-30 {padding-bottom: 30px;}
.p-b-50 {padding-bottom: 50px;}
.p-b-75 {padding-bottom: 75px;}
.p-b-100 {padding-bottom: 100px;}
.p-t-0 {padding-top: 0px;}
.p-t-5 {padding-top: 5px;}
.p-t-10 {padding-top: 10px;}
.p-t-15 {padding-top: 15px;}
.p-t-20 {padding-top: 20px;}
.p-t-25 {padding-top: 25px;}
.p-t-30 {padding-top: 30px;}
.p-t-50 {padding-top: 50px;}
.p-t-75 {padding-top: 75px;}
.p-t-100 {padding-top: 100px;}
.p-r-15 {padding-right: 15px;}


@media screen and (max-width: 979px) {
.spm-b-0 {margin-bottom: 0px;}
.spm-b-5 {margin-bottom: 5px;}
.spm-b-10 {margin-bottom: 10px;}
.spm-b-15 {margin-bottom: 15px;}
.spm-b-20 {margin-bottom: 20px;}
.spm-b-25 {margin-bottom: 25px;}
.spm-b-30 {margin-bottom: 30px;}
.spm-b-50 {margin-bottom: 50px;}
.spm-b-75 {margin-bottom: 75px;}
.spm-b-100 {margin-bottom: 100px;}
.spm-t--20 {margin-top: -20px;}
.spm-t-0 {margin-top: 0px;}
.spm-t-5 {margin-top: 5px;}
.spm-t-10 {margin-top: 10px;}
.spm-t-15 {margin-top: 15px;}
.spm-t-20 {margin-top: 20px;}
.spm-t-25 {margin-top: 25px;}
.spm-t-30 {margin-top: 30px;}
.spm-t-50 {margin-top: 50px;}
.spm-t-75 {margin-top: 75px;}
.spm-t-100 {margin-top: 100px;}
.spp-t-25 {padding-top: 25px;}
}


/* 画像がウインドウ幅よりはみ出して表示される件 */
img { 
  max-width:100%;
  height:auto;
}

/* 例：br.sp_brはタブレット以上のサイズでは非表示にする */
@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}


/*==================================================
 * ページ内リンクの位置ずれ
 *================================================*/
a.anchor{
	display: block;
	padding-top: 120px;
	margin-top: -120px;
}

:target:before {
   content:"";
   display:block;
   height:120px;
   margin:-120px 0 0;
}

/* ==========================================================================
   アンダーラインアニメーション（PC表示のみ）
   ========================================================================== */
@media screen and (min-width: 980px) {


.menu-item-24, .menu-item-25, .menu-item-26, .menu-item-27, .menu-item-175, .menu-item-467, .menu-item-5701 {position: relative;display: inline-block;text-decoration: none;}
.menu-item-24::after, .menu-item-25::after, .menu-item-26::after, .menu-item-27::after, .menu-item-175::after, .menu-item-467::after, .menu-item-5701::after {position: absolute;bottom: 10px;left: 0;content: '';width: 100%;height: 1px;background: #ffdb43;transform: scale(0, 1);transform-origin: center top;transition: transform .3s;}
.menu-item-24:hover::after, .menu-item-25:hover::after, .menu-item-26:hover::after, .menu-item-27:hover::after, .menu-item-175:hover::after, .menu-item-467:hover::after, .menu-item-5701:hover::after {transform: scale(1, 1);}

}



/*==================================================
 * contact form
 *================================================*/

/* template02 */
.form__wrap {
  width: 100%;
  max-width: 900px;/*フォームの最大幅*/
  margin-right: auto;
  margin-left: auto;
}
.wpcf7 .template02 {
  color: #666;
  font-size: 16px;
  font-weight: 300;
}
.wpcf7 .template02 a {
  margin: 0;
  padding: 0;
  text-decoration: underline;
  color: inherit;
  transition: opacity .25s;
}
.wpcf7 .template02 a:hover {
  opacity: .5;
  transition: opacity .25s;
}
/* フォーム上の罫線 */
.wpcf7 .template02 div.form__row {
  display: flex;
  margin: 0;
  padding: 0;
  border-top: 1px solid #f1f1f1;
}
.wpcf7 .template02 div.form__row.row-privacy,
.wpcf7 .template02 div.form__row.row-submit {
  display: block;
  border-top: 0;
  margin-top: 1em;
  text-align: center;
}
.wpcf7 .template02 p.form__label,
.wpcf7 .template02 p.form__body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label {
  width: 36%;
  padding: 1.5em 1em;
}
.wpcf7 .template02 p.form__body {
  width: 64%;
  padding: 1.5em 1em;
}
.wpcf7 .template02 div.form__row.row-privacy .form__body,
.wpcf7 .template02 div.form__row.row-submit .form__body {
  width: 100%;
}
/* .wpcf7 .template02 p.form__label label {
  position: relative;
  margin: 0;
  padding: 0;
  padding-left: 70px; 
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label label::after {
  content: "Optional";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 55px;
  margin: 0;
  padding: 0 5px;
  border-radius: 25px;
  background-color: #f1f1f1;
  color: #929292;
  font-size: 11px;
  text-align: center;
  box-sizing: border-box;
}
.wpcf7 .template02 p.form__label.is-required label {
  position: relative;
}
.wpcf7 .template02 p.form__label.is-required label::after {
  content: "Required";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 55px;
  padding: 0 5px;
  background-color: #ffdb43;
  color: #fff;
  font-size: 11px;
  text-align: center;
} */
/* テキストフィールド */
.wpcf7 .template02 input[type=text],
.wpcf7 .template02 input[type=tel],
.wpcf7 .template02 input[type=email],
.wpcf7 .template02 textarea {
  width: 100%;
  margin: 0;
  padding: .5em 1em;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fefefe;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: 16px;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* テキストフィールド placeholder */
.wpcf7 .template01 input[type=text]::placeholder,
.wpcf7 .template01 input[type=tel]::placeholder,
.wpcf7 .template01 input[type=email]::placeholder,
.wpcf7 .template01 input[type=url]::placeholder,
.wpcf7 .template01 input[type=date]::placeholder,
.wpcf7 .template01 input[type=number]::placeholder,
.wpcf7 .template01 textarea::placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]:-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]:-ms-input-placeholder,
.wpcf7 .template01 input[type=email]:-ms-input-placeholder,
.wpcf7 .template01 input[type=url]:-ms-input-placeholder,
.wpcf7 .template01 input[type=date]:-ms-input-placeholder,
.wpcf7 .template01 input[type=number]:-ms-input-placeholder,
.wpcf7 .template01 textarea:-ms-input-placeholder {
  color: #ccc;
}
.wpcf7 .template01 input[type=text]::-ms-input-placeholder,
.wpcf7 .template01 input[type=tel]::-ms-input-placeholder,
.wpcf7 .template01 input[type=email]::-ms-input-placeholder,
.wpcf7 .template01 input[type=url]::-ms-input-placeholder,
.wpcf7 .template01 input[type=date]::-ms-input-placeholder,
.wpcf7 .template01 input[type=number]::-ms-input-placeholder,
.wpcf7 .template01 textarea::-ms-input-placeholder {
  color: #ccc;
}
/* テキストフィールド フォーカス時 */
.wpcf7 .template01 input[type=text]:focus,
.wpcf7 .template01 input[type=tel]:focus,
.wpcf7 .template01 input[type=email]:focus,
.wpcf7 .template01 input[type=url]:focus,
.wpcf7 .template01 input[type=date]:focus,
.wpcf7 .template01 input[type=number]:focus,
.wpcf7 .template01 textarea:focus {
  outline: 0;
  border: 1px #ffdb43 solid;
  box-shadow: 0 0 2px 2px rgba(255, 219, 67, 0.5);
}
/* セレクト */
.wpcf7 .template02 span.select-wrap {
  position: relative;
  width: 250px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wpcf7 .template02 select {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  margin: 0;
  padding: .5em 3.5em .5em 1em;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  box-shadow: none;
  background-color: #fefefe;
  background-image: linear-gradient(90deg, #dcebb4, #dcebb4);
  background-position: 100% 0;
  background-size: 2em 3.5em;
  background-repeat: no-repeat;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template02 select::-ms-expand {
  display: none;
}
.wpcf7 .template02 span.select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  width: .6em;
  height: .6em;
  top: 50%;
  right: .8em;
  margin-top: -3px;
  border-bottom: 1px solid #ffdb43;
  border-right: 1px solid #ffdb43;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  box-sizing: border-box;
}
.wpcf7 .template02 select:focus {
  outline: 0;
  border: 1px #ffdb43 solid;
  box-shadow: 0 0 2px 2px rgba(255, 219, 67, 0.5);
}
.wpcf7 .template02 span.select-wrap:focus-within::after {
  border-bottom: 1px solid #ffdb43;
  border-right: 1px solid #ffdb43;
}
/* 送信ボタン */
.wpcf7 .template02 .submit-btn {
  position: relative;
  width: 250px;
  height: 40px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7 .template02 input[type="submit"], input[type="submit"] {
  cursor: pointer;
  width: 250px;
  max-width: 100%;
  padding: 10px;
  box-shadow: none;
  border: 1px #ffdb43 solid;
  border-radius: 65px;
  background-color: #ffdb43;
  color: #fff;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
  transition: all .25s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wpcf7 .template02 input[type="submit"]:disabled, input[type="submit"]:disabled {
  cursor: not-allowed;
  box-shadow: none!important;
  border: 1px solid #f8f8f8!important;
  background-color: #f8f8f8!important;
  color: #929292!important;
}
.wpcf7 .template02 input[type="submit"]:hover, input[type="submit"]:hover {
  box-shadow: 0 0 2px 2px rgba(255, 219, 67, 0.5);
  background-color: #fff;
  color: #ffdb43;
  transition: all .25s;
}
.wpcf7 .template02 input[type="submit"]:focus, input[type="submit"]:focus {
  outline: 0;
  border: 1px #ffdb43 solid;
  box-shadow: 0 0 2px 2px rgba(255, 219, 67, 0.5);
}
@media only screen and (max-width: 768px) {
  .wpcf7 .template02 div.form__row {
    display: block;
  }
  .wpcf7 .template02 p.form__label {
    width: 100%;
    padding: 1.5em 1em 0;
  }
  .wpcf7 .template02 p.form__body {
    width: 100%;
    padding: 1em 1em 1.5em;
  }
}




.term {
	font-size: 0.9em;
	font-weight: 400;
	padding: 0 5px;
	background-color: #ffdb43;
	color: white;
}


.gray {
	background-color: #fafafa;
	padding: 75px 0;
}


.box {
	border: black 1px solid;
}



@media screen and (max-width: 479px) {
.form__label {
	display: none;
}
}
/*==================================================
projectページ
 *================================================*/
.project {
	 margin: 100px 0;
}
 
 /*==================================================
HecomiMappingページ
 *================================================*/
.HecomiMapping {
	margin-bottom: 50px;
	border-bottom: 1px #e5e5e5 solid;
}

.HecomiMapping img {
	height: 230px;
	width: auto;
}

.HecomiMapping h4 span {
	 font-weight: 300;
	 font-size: 0.8em;
	 padding-left: 25px;
}

@media screen and (min-width: 768px) and (max-width: 979px) {
.HecomiMapping img {
	padding-bottom: 20px;
	height: 100px;
	width: auto;
}
}

@media screen and (max-width: 640px) {
.HecomiMapping img {
	height: auto;
	padding-bottom: 20px;
	text-align: center !important;
}
.HecomiMapping {
	text-align: center !important;
}
}

.h100 img {
	width: 100%;
	height: 100%;
}

.t110 {
	height: 110px;
}
.t102 {
	height: 102px;
	margin-top: 5px;
}

.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(90%/5);/*←画像を横に4つ並べる場合*/
	padding: 0 10px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
}
.top-banner li img {
	height:auto; /*画像のはみだしを防ぐ*/
	width: auto; /*画像の縦横比を維持 */
}


 /*==================================================
City Study Tracing, What is City Study?, Hecomi Study
 *================================================*/
.MouseHover {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.MouseHover .caption {
	line-height: 1.6em;
	color: black;
	font-weight: 600;
	font-size: 0.8em;
	text-align: center;
	position: absolute;
	top: 50%; /*親要素を起点に上から50%*/
	left: 50%;  /*親要素を起点に左から50%*/
	transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/
	-webkit-transform: translateY(-50%) translateX(-50%);
}
.MouseHover .mask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color: rgba(255,255,255,0.4);
	-webkit-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.MouseHover .mask2 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color: rgba(255,255,255,0.8);
	-webkit-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.MouseHover:hover .mask, .MouseHover:hover .mask2 {
	opacity: 1;	/* マスクを表示する */
	-webkit-transform: scale(1.3);	/* 2倍に拡大 */
	transform: scale(1.3);
}

@media screen and (max-width: 479px) {
.MouseHover .caption {
	line-height: 1.3em;
	font-size: 0.65em;
}
}

 /*==================================================
News
 *================================================*/

@media screen and (min-width: 980px) {
.NewsContents {
	padding: 2em;
	background-color:#FFFFFF;
	height:360px;
	overflow:auto;
	overflow-y:scroll;
	overflow-x:hidden;
	padding-right: 2em;
	border-top: 1.5px #f1f1f1 solid;
	border-bottom: 1.5px #f1f1f1 solid;
	border-left: 1.5px #f1f1f1 solid;
	text-align: left;
	line-height: 1.3em;
}
}
.NewsContents .entry {
	margin-bottom: 20px;
}
.NewsContents h1.entry-title {
	margin-top: 8px;
	margin-bottom: 5px;
}

@media screen and (min-width: 980px) {
.box-gray {
	background-color: #f9f9f9;
	height:360px;
	width: 360px;
	margin-left: 15px;
}
}
.box-gray {
	background-color: #f9f9f9;
}
.box-gray2 {
	background-color: #f9f9f9;
	padding: 25px 0;
}

.news-h1 {
	color: #C6C6C6;
	margin-bottom: 25px;
}


@media screen and (min-width: 980px) {
.ftable {
    display: flex;
}
.bottom {
    align-self: flex-end;
    padding-bottom: 65px;
}
}
@media screen and (max-width: 479px) {
.bottom {
    align-self: flex-end;
    padding-bottom: 0px;
    margin-bottom: -50px;
}
}

#ExhibitionView h1 {
	margin-bottom: 50px;
}
 /*==================================================
アコーディオン
 *================================================*/

/*ボックス全体*/
.accbox {
    margin: 0;
    padding: 0;
}

/*ラベル*/
.accbox label {
	text-align: right;
    display: block;
    margin: 0 0 25px 0;
    padding : 0;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    opacity: 1;
}

@media screen and (max-width: 479px) {

}

.row-20 {
    margin-left:-10px;
    margin-right:-10px;
}
.row-20>div {
    padding-right:10px;
    padding-left:10px;
}

 /*==================================================
sp
 *================================================*/

@media screen and (max-width: 479px) {
.content h1 {
    margin-top: 20px;
}
.content h1, .content h2, .content h3, .content h4 {
    margin-bottom: 20px;
    text-align: center;
}
h4 span {
    padding-left: 0px !important;
}
.m-b-30 {
	margin-bottom: 10px;
}
/* ガター幅（余白）を調整 */
.row-0 {
    margin-left:0px;
    margin-right:0px;
}
.row-0>div {
    padding-right:0px;
    padding-left:0px;
}
.row-10 {
    margin-left:-5px;
    margin-right:-5px;
}	
.row-10>div {
    padding-right:5px;
    padding-left:5px;
}
.row-20 {
    margin-left:-10px;
    margin-right:-10px;
}
.row-20>div {
    padding-right:10px;
    padding-left:10px;
}
.row-30{
    margin-left:-15px;
    margin-right:-15px;
 }
.row-30>div {
    padding-right:15px;
    padding-left:15px;
}
.row-40{
    margin-left:-20px;
    margin-right:-20px;
}
.row-40>div{
    padding-right:20px;
    padding-left:20px;
}
.row-50{
    margin-left:-25px;
    margin-right:-25px;
}
.row-50>div{
    padding-right:25px;
    padding-left:25px;
}
.row-60{
    margin-left:-30px;
    margin-right:-30px;
}
.row-60>div{
    padding-right:30px;
    padding-left:30px;
}
}



.caption-box {
	font-size: 0.8em;
	line-height: 1.4em;
	padding: 15px 15px 5px 15px;
	background-color: #f7f7f7;
	font-style: italic;
	margin-bottom: 15px;
}
.caption-box b {
	font-size: 1.2em;
}


.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.LH {
	line-height: 1.6em;
}



@media screen and (min-width: 980px) {
.newsletter h3 span {
	font-weight: 300;
}
.newsletter h3 {
	padding-bottom: 25px;
}
.newsletter {
	text-align: center;
	line-height: 2em;
}
}　/* パソコン表示 */
@media screen and (min-width: 479px) and (max-width: 979px) {
.newsletter {
	text-align: center;
	line-height: 2em;
}
}　/* タブレット端末表示 */





/*==================================================
 * menu
 *================================================*/
.sp-menu ul {
	list-style-type: none;
	list-style: none;
}
.sp-menu ul li {
	font-weight: 700;
}


/*==================================================
 * sp-nav
 *================================================*/
.p-global-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-global-nav ul ul {
	padding-left: 1em;
  list-style: none;
}

.btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 3;
}

.btn__text{
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.btn__menu{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;  
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 1px;
  background: #26344a;
  margin: 0;
  padding: 0;
  border: none;
  transition: all 0.5s;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.btn__menu::before{
  display: block;
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #26344a;
  transition: all 0.5s;
}

.btn__menu::after{
  display: block;
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #26344a;
  transition: all 0.5s;
}

.btn__menu.active{
  background: transparent;
}

.btn__menu.active::before{
  top: 0;
  transform: rotate(-45deg);
}

.btn__menu.active::after{
  bottom: 0;
  transform: rotate(45deg);
}


.p-global-nav{
  position: absolute;
  top: 48px;
  right: -120%;
  background:rgba(255,255,255,0.7);
  transition: all 0.5s;
  padding: 10px 20px 10px 10px;
  font-weight: 500;
}
.p-global-nav.active{
  right: 0;
}















/*==================================================
 * jQuery Lightbox
 *================================================*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility:hidden
}

* html > body .clearfix {
    display: inline-block;
    width:100%
}

* html .clearfix {
    height:1%
}

#lightboxIframe {
    display:none
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10090;
    width: 100%;
    height: 500px;
    background-color: #626262 !important;/* 変更 */
    filter: alpha(opacity=60);
    -moz-opacity: .6;
    opacity: .6;
    display:none
}

#lightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10100;
    line-height:0
}

#jqlb_spinner {
    height: 32px;
    background-image: url(./images/loading.gif);
    background-repeat: no-repeat;
    background-position:center center
}

#jqlb_closelabel {
    height: 22px;
    width: 66px;
    background-image: url(./images/closelabel.gif);/* 変更 */
    background-repeat: no-repeat;
    background-position:center center
}

#lightbox a img {
    border:none
}

#outerImageContainer {
    position: relative;
    background-color: transparent !important;
    width: 300px;
    height: 300px;
    margin:0 auto
}

#imageContainer {
    padding: 0 !important;
    text-align:center
}

#jqlb_loading {
    position: absolute;
    top: 40%;
    left: 0;
    height: 25%;
    width: 100%;
    line-height:0
}

#hoverNav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index:10
}

#imageContainer > #hoverNav {
    left:0
}

#hoverNav a {
    outline:0
}

#nextLink, #prevLink {
    width: 45%;
    height: 100%;
    background: transparent url(./images/blank.gif) no-repeat;
    display:block
}

#prevLink {
    left: 0;
    float:left
}

#nextLink {
    right: 0;
    float:right
}

#prevLink:hover, #prevLink:visited:hover {
    background:url(http://7794feae9a8d74da.lolipop.jp/wordpress/wp-content/uploads/2021/01/icon-slick-prev.svg) left 40% no-repeat !important;
    background-size:25px 25px !important;
}

#nextLink:hover, #nextLink:visited:hover {
    background:url(http://7794feae9a8d74da.lolipop.jp/wordpress/wp-content/uploads/2021/01/icon-slick-next.svg) right 40% no-repeat !important;
    background-size:25px 25px !important;
}

#imageDataContainer {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: transparent !important;/* 変更 */
    color: white !important;/* 変更 */
    margin: 0 auto;
    line-height:1.4em
}

#imageData {
    padding:10px
}

.ontop #imageData {
    padding-top:5px
}

#imageData #imageDetails {
    float: left;
    text-align: left;
    margin-bottom: 10px;
    width: 80%;
    width: -moz-calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: -o-calc(100% - 80px);
    width:calc(100% - 80px)
}

#imageData #imageDetails #titleAndCaption #titleText {
    font-weight:700
}

#imageData #imageDetails #titleAndCaption #captionText {
    font-weight:400
}

#imageData #imageDetails #controls {
    margin: 0;
    white-space:nowrap
}

#imageData #bottomNav #bottomNavClose {
    height: 22px;
    width: 66px;
    float: right;
    margin-bottom: 10px
}

#playPause {
	display: none !important;
}






/*==================================================
 * #636363
 *================================================*/

.morelink {
	font-weight: 700;
	font-size: 0.8em;
	padding: 0 5px;
	background-color: #191970;
	position:absolute;
	top:0px;
	left:15px;
	z-index: 2;
}
.morelink a {
	color: white;
}
.morelink a:hover {
	color: white;
}
@media screen and (max-width: 479px) {
.morelink {
	font-size: 0.6em;
}
.morelink {
	left:5px;
}
}




.to-top{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 10px;
  bottom: 0;
  cursor: pointer;
}


















.flexbox {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}



.item {
	width: 16.6%;
	padding: 10px;
}
.item.x2 {
    width: 33.2%;
    padding: 10px;
}
.item.x3 {
    width: 49.8%;
    padding: 10px;
}
/* Diagram */
.item2 {
	width: 49.8%;
	padding: 10px;
}
/* Tracing */
.item3 {
    width: 33.33%;
    padding: 30px;
  }
.item3.x2 {
    width: 66.66%;
    padding: 30px;
  }
  
  
.year-box {
    position: relative;
	border: 1px #bbbbbb solid;
	padding: 10px;
}

.year-box p {
	color: #bbbbbb;
	font-weight: 600;
	font-size: 2em;
	text-align: center;
	position: absolute;
	top: 50%; /*親要素を起点に上から50%*/
	left: 50%;  /*親要素を起点に左から50%*/
	transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/
	-webkit-transform: translateY(-50%) translateX(-50%);
}

.title-year {
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  padding:0 3%;
  font-size:2em;
  color: black;
  border: 1px solid black;
  z-index: 2;
}

/* 表示幅が860px以下 */
@media ( max-width : 860px ){
  .flexbox{
    height:220vw;
  }
}
/* 表示幅が667px以下 */
@media ( max-width : 667px ){
  .flexbox{
    height:auto;
  }

.flexbox .item {
    width: 33.33%;
}
.flexbox .item.x2 {
    width: 66.66%;
}
.flexbox .item.x3 {
    width: 99.99%;
}
.item3 {
    width: 33%;
    padding: 5px;
  }
.item3.x2 {
    width: 66%;
    padding: 5px;
  }
.year-box p {
  font-size: 1.5em !important;
  }
}