/*
Theme Name: LieN Design Temp
Theme URl:https://liendesign.net/
Author: テーマの作成者
Description: LieN Design WP用テーマ
tags: ウェブデザイン portfolio ブログ note Design
Version: 1
*/
@charset "utf-8";

/* リセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font-weight: inherit;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
   font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}
/* //リセット */

*{margin:0;padding:0;box-sizing: border-box;}

body {
    letter-spacing: 0.05em;
    overflow-wrap: break-word;
    word-break: normal;
    font-family: BIZ UDPGothic,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","メイリオ",Meiryo,Helvetica,Arial,sans-serif;
	color:#333;
	font-size: 1.4rem!important;
	line-height: 1.7;
  position: relative;
  /*min-height: 100vh;*/
}
ol, ul {list-style: none;}
a{
  text-decoration: none;color:#222;position: relative;
}
html {scroll-behavior: smooth;font-size: 62.5%;}

.pc{display: block!important;}
.sp{display: none!important;}
@media screen and (max-width: 599px) {
  .pc{display: none!important;}
  .sp{display: block!important;}
  body{font-size: 3vw!important;}
}
/* 共通 */
img{width: 100%;}
.mgnb10{margin-bottom: 10%;}
.mgnb20{margin-bottom: 20%;}

.bggray{background-color: #F2F2F2;}
.bgbrw{background-color: #746557;}
.ft_pnk{color: #DC889D;}
.ft_wt{color: #fff;}
p.txt{font-size: 1.3rem!important;font-weight:inherit!important;color: #333!important;}
/* ------------------------------
    header
--------------------------------*/
header .header-inner{
  display: flex;
  align-items: center;
  padding: 1%;
  /*max-width: 1200px;*/
  width: 100%;
  justify-content: space-between;
  background-color: #fff;
	margin:auto;
	box-shadow: 0px 0px 10px #ccc;
}
h1.site_title {
  background: url(images/logo_bk.png) no-repeat;
  overflow: hidden;
  width: 40%;
  height: 48px;
  text-indent: 100%;
  white-space: nowrap;
  background-size: contain;
  margin-left: 5%;
}
h1.site_title a{display: block;height: 100%;}
nav{width: 100%;}
nav#menu-header .menu ul, nav#menu-header ul.menu{
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  width: calc(100% - 5%);
}
nav#menu-header .menu ul li, nav#menu-header ul.menu li{
  padding: 1% 2%;
}
.menu ul li > a ,  ul.menu li > a {
  padding-bottom: 5px;
  position: relative;
}
.menu ul li > a::before ,ul.menu li > a::before{
  background: #DD5476;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: center top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.menu ul li > a:hover::before ,ul.menu li > a:hover::before {
  transform-origin: center top;
  transform: scale(1, 1);
}

/* drawer */
header .drawer{
  position: absolute;
  top: 10px;
  right: 8px;
  background-color: #DC889D;
  border-radius: 5px;
  padding: 1%;
}
@media screen and (max-width: 599px) {
  .header-inner{
    position: fixed;
    top: 0;
    opacity: 0.95;
    justify-content: left!important;
    z-index: 10;
	  padding:2%!important;
  }
	
  h1.site_title{
    width: 50%!important;
    height: 50px!important;
	  margin-left:0;
  }
  header nav{display: none!important;}
  header nav.drawer-content{display: block!important;}

  /* チェックボックスは非表示に */
  .drawer-hidden {display: none;}

  .drawer-open {
  display: flex;
  height: 30px;
  width: 30px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;
  cursor: pointer;
}

.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 1px;
  width: 20px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

  .drawer-open span:before {bottom: 8px;}

  .drawer-open span:after {top: 8px;}

  #drawer-check:checked ~ .drawer-open span {background: rgba(255, 255, 255, 0);}

  #drawer-check:checked ~ .drawer-open span::before {
    bottom: 0;
    transform: rotate(45deg);
}

  #drawer-check:checked ~ .drawer-open span::after {
    top: 0;
    transform: rotate(-45deg);
}

header nav.drawer-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top:60px;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
  opacity: 0.98;
  text-align: left;
}

  #drawer-check:checked ~ .drawer-content {left: 0;/* メニューを画面に入れる */}
}
header nav.drawer-content div ul{padding: 2% 0;}
header nav.drawer-content div ul li.page_item ,header nav.drawer-content div ul li.menu-item {
  padding: 5%;
  border-bottom: 1px #DC889D dotted;
}
header nav.drawer-content div ul li > a {
  display: inline-block;
  width: 90%;
  font-size: 3.5vw;
}
header nav.drawer-content div ul li.page_item:before ,header nav.drawer-content div ul li.menu-item:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 2%;
}
header nav.drawer-content div ul li.menu-item:before {content: "\f0da";}
header nav.drawer-content div ul li.page-item-2:before {content: "\f015";}
header nav.drawer-content div ul li.page-item-133:before {content: "\f302";}
header nav.drawer-content div ul li.page-item-11:before {content: "\f2bb";}
header nav.drawer-content div ul li.page-item-77:before {content: "\f0e8";}
header nav.drawer-content div ul li.page-item-186:before {content: "\f1d8";}

.drawer-content ul.drawer-list li.drawer-item {
  padding: 3% 5%;
  border: 1px #ccc dotted;
}
.drawer-content ul.drawer-list li.drawer-item a:before {
  font-family: "Font Awesome 5 Free";
	content: "\f0da";
	font-weight: 900;
  margin-right: 1%;
}

.sp_snslink{
  display: flex;
  justify-content: center;
  margin: 10% 0;
}

.sp_snslink a{
  font-size: 10vw;
  margin: 0 2%;
}
/* ------------------------------
    Content
--------------------------------*/
.entry-content{
  font-size: 1.4rem;
  line-height: 2;
}
h2 {
  font-family: serif;
  font-size: 2.4rem;
  color: #DD5476;
  position: relative;
  margin-bottom: 3%;
}
h2:after {
  content: '';
  width: 110px;
  height: 1px;
  display: inline-block;
  background-color: #DD5476;
  position: absolute;
  bottom: -5px;
  left: 0;
}

.content_inner{
  max-width: 800px;
    margin: 2% auto 0;
    padding-top: 2%;
}
.content_inner h3{font-family:serif ;}

.txt_inner{padding: 5%;}
.sec-description{
  margin: 3% 0 8%;
  text-align: center;
  font-family: serif;
  font-size: 1.8rem;
}
.content_inner .Service h3{
  font-size: 3.4rem;
  color: #DD5476;
  text-align: center;
  margin:0;
  border: 0;
}
.content_inner .Service h4{
  font-size: 1.6rem;
  color: #DD5476;
  text-align: center;
  margin-bottom: 5%;
  font-family: serif;
}
.infoArea{    margin: 7rem 1rem;}
.infoArea > h3{font-size: 2.4rem;text-align: center;}
.infoArea > h4{font-size: 1.8rem;text-align: center;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.infoArea dl{
  border-top: 2px solid #DD5476;
  border-bottom: 2px solid #DD5476;
  padding: 1rem 0.5rem;
  height: 200px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
	font-size:1.2rem;
}
.infoArea dl dt{
  width: 10%;
  padding: .5rem 0;
  border-bottom: 1px dotted #ccc;
}
.infoArea dl dd{
  width: 90%;
  padding: .5rem 0;
  border-bottom: 1px dotted #ccc;
}

.contactLnk{
  text-align: center;
  padding: 5%;
}
.contactLnk h2::after{
    content: '';
    width: 110px;
    height: 1px;
    display: inline-block;
    background-color: #DD5476;
    position: absolute;
    bottom: -5px;
    left: calc(50% - 55px)
  }

.contact_inner{
  background-color: #fff;
  padding: 5%;
  box-shadow: 0 0 10px #ccc;
  max-width: 650px;
  margin: auto;
}

.contact_inner a{
position: relative;
border: 1px solid #555;
  padding: 8px 30px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #333;
  outline: none;
  transition: all .2s linear;
  margin: 5% 0 0;
}
.contact_inner a:hover{
background:#333;
color:#fff;
}
.contact_inner a::before{
content:"";
position: absolute;
top:50%;
right:-26px;
width:40px;
height:1px;
background:#333;
  transition: all .2s linear;
}
.contact_inner a::after{
content:"";
position: absolute;
  top: 14px;
  right: -21px;
width:1px;
height:8px;
background:#333;
  transform:skewX(45deg);
  transition: all .2s linear;
}
.contact_inner a:hover::before{
right:-30px;
}
.contact_inner a:hover::after{
right:-25px;
}
.Linkbtn{margin: 5% auto;}
.Linkbtn a{
  display: block;
  width: 70%;
  border: 1px solid #333;
  padding: 2%;
  text-align: center;
  margin: auto;
  max-width: 650px;
  border-radius: 10px;
}
.Linkbtn a:hover{
  background-color: #333;
  color: #fff;
  transition: all .3s;
}

@media screen and (max-width: 599px) {
main{
  position: relative;
  top: 60px;
  padding-bottom: 5%;
}
h2{margin-bottom: 10%!important;}
.content_inner {margin: 0 1.5rem!important;padding-top:5%;}
.contactLnk {padding: 5%!important;}
.sec-description{font-size: 4.5vw;}
.Linkbtn{margin: 10% auto;}
	.infoArea > h3{font-size:4.8vw;}
	.infoArea dl{height:270px;}
.infoArea dl dt{width: 20%;}
.infoArea dl dd{width: 80%;}
}

/* ------------------------------
   Contact Form
  ------------------------------ */
  .contactForm {
    max-width: 750px;
    box-sizing: border-box;
    margin: 0 auto;
    display: block;
    width: 100%;
}
.wpcf7-form-control-wrap input{
  font-size:16px;
}
.wpcf7-form-control-wrap textarea{
  font-size:16px;
}
.contactForm dt{margin: 1% 0;font-weight: bold;}
.contactForm span.must{color:#CB0000;margin-left: 2%;}
.contactForm dd{margin-bottom: 2%;}
.contactForm dd input ,.contactForm dd textarea{padding: 1%;width: 85%;}
.btn_contact7{margin-bottom: 5%;}

.reccaptcha_dec{
	font-size: 1.2rem;
    margin: 0 auto 2rem;
    max-width: 750px;
}
.wpcf7-list-item{
	width: 100%;
}
.contactForm label input{
	width: 5%!important;
    /*margin-right: 1rem;*/
}
.wpcf7-response-output{
	max-width: 750px;
	margin: 2em auto 1em!important;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 2rem!important;
}

@media screen and (max-width:599px) {
  .contactForm dd input, .contactForm dd textarea {width: 100%!important;}
  .btn_contact7 input {width: 30%!important;margin: 0!important;padding: 4%;font-size: 1.5rem;}
}

/* ------------------------------
   Profile
------------------------------ */
.profile .aboutme {
  padding: 3%;
  position: relative;
  margin-bottom: 7%;
}
.profile .aboutme:after{
  content: '';
  width: 110px;
  height: 2px;
  display: inline-block;
  background-color: #DD5476;
  position: absolute;
  bottom: -5px;
  left: calc(50% - 55px)
}
.profile dl{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: stretch;
	margin-bottom:5%;
}
.profile dt{
  width: 30%;
  padding: 2%;
  border-bottom: 1px dotted #ccc;
  font-weight: bold;
}
.profile dd{
  width: 70%;
  padding: 2%;
  border-bottom: 1px dotted #ccc;
}
.profile h3, .portfolio h3 {
  position: relative;
  margin-bottom: 0.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid #ccc;
  font-size: 1.6rem;
  font-weight: unset;
}
.profile h3:before, .portfolio h3:before {
  position: absolute;
  content: '';
  width: 15%;
  left: 0;
  bottom: -1px;
  border-bottom: 5px solid #C0C03E;
}

.portfolio p{text-align: center;}

@media screen and (max-width: 599px) {
  .profile .aboutme{margin-bottom: 15%!important;}
  .profile dt {width: 100%!important;border: none!important;padding: 3%!important;}
  .profile dd{width: 100%!important;padding: 2% 0 5% 5%!important;}
  .profile .aboutme:after{bottom: -5vw!important;}
}
/* ------------------------------
   Quote
  ------------------------------ */
.quote h3{
  position: relative;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333;
  background-color: white;
  color: #333;
  font-weight: none;
  font-size: 3rem;
  text-align: center;
  margin: 5rem 0;
}
.quote h3:before{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) skew(-25deg);
  height: 20px;
  width: 10px;
  border-right: 2px solid #333;
  background-color: white;
  content: "";
}
.quote dl{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 5% 0;
}
.quote dt{
  width: 80%;
  padding: 2%;
  border-bottom: 1px dotted #ccc;
}
.quote dd{
  width: 20%;
  padding: 2%;
  border-bottom: 1px dotted #ccc;
}
.estimate{
  padding: 6%;
  border: 2px dotted #DD5476;
  margin: 10% 5%;
}
.estimate p{border-bottom: 2px dotted #DD5476;padding: 3%;}
.flow{
  margin: 10% auto;
  max-width: 500px;
}
.flow div {
  border: 2px solid #DC889D;
  padding: 3%;
  position: relative;
  margin: 0 5% 10% 5%;
}
.flow div:after{
  position: absolute;
  bottom: -23%;
  right: 50%;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 1.4em;
  height: 1.4em;
  border-bottom: 1px solid #808080;
  border-right: 1px solid #808080;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.flow div:last-of-type:after{display: none;}

.flow div p{
  font-size: 1.85rem;
  font-weight: bold;
  color: #DD5476;
  text-align: center;
}


@media screen and (max-width: 599px) {
  .quote dl {margin: 10% 0!important;}
  .quote dt {width: 100%!important;border: none!important;}
  .quote dd {width: 100%!important;text-align: right!important;}
  .estimate {margin: 10% 0!important;}
}

/* ------------------------------
   記事（投稿）
  ------------------------------ */
.singlePost{
  padding: 0 0 5% 0;
}
.entry-header h2.pagetitle , .singlePost_inner > h3{
  font-family: system-ui!important;
  font-weight: bold;
  font-size: 2.5rem;
}
.singlePost_inner > h3{margin: 5% 0 2%;}
.singlePost_inner > h4{
  border-bottom: solid 2px #DD5476;
  position: relative;
  font-weight: bold;
  font-size: 1.65rem;
  margin: 1rem 0;
}
.singlePost_inner > h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px #222;
  bottom: -2px;
  width: 10%;
}

.singlePost_inner > p{
  font-size: 1.4rem;
  line-height: 2;
  padding: 2%;
}
.singlePost ul li{
  border-bottom: 1px dotted;
  width: 100%;
  padding: 2%;
}
.singlePost_inner .underline{
  background: linear-gradient(transparent 70%,#FFF9C4 0%);
  font-weight: bold;
}
b, strong{font-weight: 700;}
@media screen and (max-width: 599px) {
  .singlePost_inner > h3{font-size: 2.2rem;line-height: 1.3;}
  .singlePost_inner > p{line-height: 1.8;}
}

/* ページャー */
.entry-pager{
  margin: 2rem 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  text-align: left;
}
.entry-pager > a {
  padding: 2%;
  display: inline-block;
  border-right: dotted 1px #ccc;
  width: 48%;
}
.entry-pager > a:last-child {text-align:end; border-right: 0;}

/* ------------------------------
   footer
  ------------------------------ */
  nav#menu-footer .menu ul{
    display: flex;
    justify-content: center;
    border-top: 1px solid #DC889D;
  }
  nav#menu-footer .menu ul li{
    padding: 1% 2%;
  }
  .copyright{
  background-color: #DC889D;
  text-align: center;
  color: #fff;
  padding: 1rem;
}
.btn_contact7 input{
  background-color: #333;
  color: #fff;
  padding: 2%;
  width: 20%;
  border-radius: 10px;
  margin: 0 3%;
}

.footer-inner .sp_snslink{margin: 1% 0;}
.sp_snslink a {font-size: 4vw!important;}

.related-links{
	 max-width: 800px;
    margin: 0 auto 3rem;
}
.related-links h3{
	    text-align: center;
    color: #DC889D;
    font-weight: bold;
    margin: 2rem 0 1rem;
    font-size: 1.6rem;
	display:flex;
	justify-content:center;
	align-items:center;
}
.related-links h3::before,
.related-links h3::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background: #DC889D;
}
.related-links h3::before{margin-right:2rem;}
.related-links h3::after{margin-left:2rem;}


@media screen and (max-width: 599px) {
  footer{
    position: relative;
    top: 50px;
  }
  .sp_snslink a {font-size: 10vw!important;}
	.related-links{padding:1rem 3rem;}
}


/* 右下のreCAPTCHAのバッチを削除 */
.grecaptcha-badge {
	visibility: hidden;
}

/* キャンドルページ */
.candle_sec{
  max-width: 900px;
  margin:5rem auto; 
}
.candle_sec h2:after{
  content: none;
}
.candle_sec h3{
  font-size: 2.8rem;
}
.candle_sec #pt-cv-view-qfio0u2x .pt-cv-title a{
  font-size: 1.4rem!important;
  line-height: 1.5;
}
.candle_sec #pt-cv-view-qfio0u2x .pt-cv-content {
    font-size: 11px;
}
@media screen and (max-width: 599px) {
.candle_sec{
	   margin: 0 2rem;
	}
}