@charset "UTF-8";

html{
font-size: 62.5%;  
}

*,*::before,*::after{
  box-sizing: border-box;
}

body{
  color: black;
  background: rgb(255,255,255);
  text-align: center;
  font-size: 1.4rem;
  font-family: "Hiragino Kaku Gothic Pron", Meiryo, sans-serif;
  background: #fff; 
}

.header{
 padding: 100px 30px 80px;
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: local;
  background-size: cover;
  height: 100vh;
}


.logo{
  float: right;
}

.contact-banner{
  background: rgb(221,202,175);
}

.site-title-sub{
  margin: 0 0 30px;
  letter-spacing:  1px;
  font-size: 2.2rem;
}

.site-title-sub::before,
.site-title-sub::after{
  content: '';
  display: inline-block;
  width:  140px;
  height:  2px;
  margin: 0 30px;
  background-color: orange;
  vertical-align:  middle;
}

.site-title{
  margin:  40px 0 40px;
  font-size: 5.5rem;
text-align: left;
  color: black;
}

.site-description{
  margin-bottom:  30px;
  color: black;
  font-size: 2rem;
  text-align: left;
}

h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: black;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px rgb(111,097,082);/*左線*/
  margin: 10px 20px auto;
  text-align: left;
  font-family: 'Vidaloka', MS Pゴシック, sans-serif;
  font-size: 24px;
  font-weight: normal;
  }
  

p{
margin: 10px 25px auto;
color: black;/*文字色*/
text-align: left;
font-family: 'Vidaloka', MS Pゴシック, sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 2;
}


.button{
  display: inline-block;
  width: 200px;
  padding: 20px;
  border-radius: 4px;
  background-color: #afa58d;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 1.2rem;
}

.button:hover{
  opacity: 0.9;
}

.button-showy{
  background-color: #f1b400;
}

a.cp_btn {
position: relative;
display: block;
width: 100%;
text-align: left;
font-weight: normal;
text-decoration: none;
color: #FFF;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
background: rgb(142,121,094);
border-radius: 4px;
font-family: 'Vidaloka', MS Pゴシック, sans-serif;
font-size: 20px;
line-height: 2;
}

.concept{
    padding: 80px 30px;
}

.concept-wrappper{
  width: 80%;
  margin: 50px auto 0;
 }

.concept-text{
  margin:  30px 0 15px;
  letter-spacing: 2px;
  font-size: 4.5rem;
  color: black;  
}

.checkmark001{
	padding-left:24px;
	position:relative;
}
.checkmark001:before,
.checkmark001:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark001:before{
	width:16px;
	height:16px;
	background:#ffffff;
    	border:1px solid #000000;
	left:0;top:2px;
}
.checkmark001:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:18px;
	height:5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:3px;
}

.under {
  background: linear-gradient(transparent 70%, #f1b400 70%);
    border-width:5px;
}

.concept2{
  padding: 80px 30px;
  background-color: rgb(142,121,094);
}

.concept2-wrappper{
  width: 80%;
  margin: 50px auto 0;
}

.concept2 p{
  margin:  30px 0 15px;
  letter-spacing: 2px;
  font-size: 3rem;
  color: #fff;
  text-align: center;
  margin-left: 10%;
}

.about{
  padding:  80px 30px;
  background-color: #fff;
  }

.about-wrapper{
  width: 80%;
  margin: 50px auto 0;
 }

.explain{
  padding:  80px 30px;
}

.explain-wrapper{
  width: 80%;
  margin: 50px auto 0;
}

.logo2{
    max-width: 100%;
	height: auto;
}

.center {
  text-align: center;
}
.box-wrap {
  border: 1px solid rgb(111,097,082);
  display: inline-block;
}
.box-inner {
  font-size: 25px;
  font-weight: bold;
  background: #fff;
  margin: -2px 8px;
  padding: 5px 20px;
  color: rgb(111,097,082);
}

.flow{
  padding:  80px 30px;
  background-color: #f5f5f5;
}

.flow-wrapper{
  width:80%;
  margin: 50px auto 0;
}

.lawyer{
  padding:  80px 30px;
}

.lawyer-wrapper{
  width: 80%;
  margin: 50px auto 0;
}

.lawyer-image1{
    border-radius: 50%;
    width: 220px;
    height: 220px;
    background-size: cover;
}

.lawyer1{
  display: flex;
    justify-content: center;
  align-items: flex-start;
}

.lawyer-image{
  height: auto;
  width: auto;
}

.fee-wrapper{
  width: 80%;
  margin: 50px auto 0;
}

.access-wrapper{
  width: 80%;
  margin: 50px auto 0;
}


.qa-wrapper{
  width: 80%;
margin: 50px auto 0;
  text-align: left;
}

.case{
  padding:  80px 30px;
}

.case-wrapper{
  width: 80%;
  margin: 50px auto 0;
  text-align: left;
}

.privacy{
  padding:  80px 30px;
}

.privacy-wrapper{
  width: 80%;
  margin: 50px auto 0;
}

.chudan {
    position: relative;
    padding:0.25em 3em;
  margin:  auto ;
}
.chudan:before,.chudan:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.chudan:before{
    border-left: solid 2px rgb(111,097,082);
    border-top: solid 2px rgb(111,097,082);
    top:0;
    left: 0;
}
.chudan:after{
    border-right: solid 2px rgb(111,097,082);
    border-bottom: solid 2px rgb(111,097,082);
    bottom:0;
    right: 0;
}
.chudan p {
    margin: 0; 
    padding: 0;
}

.heading{
  margin:  30px 0 15px;
  letter-spacing: 2px;
  font-size: 3rem;
  color: black;  
}

ul, li, dl, dt, dd {
margin: 0;
padding: 0;
}
li {
list-style: none;
}

.okomari1{
margin: 10px 40px auto;
color: black;/*文字色*/
text-align: left;
font-family: 'Vidaloka', MS Pゴシック, sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 2.5;
}
.okomari2{
  list-style-type: square;
}

.arrow{
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
  margin: 0px  auto;
  left: 0;
  right: 0;
}

.arrow2 {
    margin: 0 auto 50px;
    padding-top: 15px; /* 要素の上の余白調整 */
    position: relative;
}

.arrow2:before {
    width: 100px; /* 四角形の幅 */
    height: 80px; /* 四角形の高さ */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#FFBF66));
    background-image: -webkit-linear-gradient(#FFFFFF, #FFBF66);
    background-image: linear-gradient(#FFFFFF, #FFBF66);
    content: "";
    position: absolute;
    top: 0;
    left: 50%; /* 中央寄せに使用 */
    margin-left: -50px; /* 中央寄せに使用 */
}

.arrow2:after {
    border-top: 35px solid #FFBF66; /* 角度を緩やかなものに指定 */
    border-left: 70px solid transparent; /* 左のボーダーを透過に指定 */
    border-right: 70px solid transparent; /*右のボーダーを透過に指定*/
    content: "";
    position: absolute;
    top: 80px; /* 四角形の高さと同じ物を指定 */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -70px; /* 中央寄せに使用 */
}

/* テキストの指定 */
.arrow2 span {
    position: relative;
    z-index: 3;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.4;
    text-shadow: 2px 2px 1px rgb(255,255,255);
}

.lead p{
  font-size: 18px;
  margin: 10px 30px auto;
  color: #1A237E;
  line-height: 1.5;
}

.lead{
  font-size: 20px;
  color: #1A237E;
}

.strong{
color: red;  
}

.free{
  font-size: 20px;
  color: #ed3034;
}

.blue_line {
padding: 0.25em 0.5em;/*上下 左右の余白*/
background: transparent;/*背景透明に*/
border-left: solid 5px rgb(221,202,175);/*左線*/
font-family: 'Vidaloka', MS Pゴシック, sans-serif;
font-size: 20px;
font-weight: normal;
margin: 10px 25px auto;
}

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

/* セクション　スキル部分----------------------- */
.skills{
  padding: 80px 0;
  background-color: #fff;
  color: #333;
}

.skills-wrapper{
  display: table;
  width: 80%;
  margin: 50px auto 0;
  table-layout: fixed;
}

.skills-box{
  display: table-cell;
}

.skill-icon{
  width: 150px;
  height: 150px;
  margin-bottom: 30px;
  border: 4px solid;
  border-radius: 50%;
  color: rgb(221,202,175);
  font-size: 8rem;
  line-height: 142px;
}

.skills-title{
  margin: 0 20px 20px;
  font-size: 2rem;
}

.skills-text{
  margin: 0 20px;
  line-height: 2;    
}

/* チョイスセクション　部分----------------------- */
.choice{
  padding: 80px 0;
  background-color: #fff;
  color: #333;
}

.choice-wrapper{
  display: table;
  width: 80%;
  margin: 50px auto 0;
  table-layout: fixed;
}

.choice-box{
  display: table-cell;
}

.choice-icon{
  width: 150px;
  height: 150px;
  margin-bottom: 30px;
  border: 4px solid;
  border-radius: 50%;
  color: rgb(221,202,175);
  font-size: 8rem;
  line-height: 142px;
}

.choice-title{
  margin: 0 20px 20px;
  font-size: 2rem;
}

.choice-text{
  margin: 0 20px;
  line-height: 2;    
}

/* ページトップへbutton----------------------- */
#page_top{
width: 40px;
height: 40px;
position: fixed;
right: 0;
bottom: 10px;
background: rgb(111,097,082);
opacity: 0.6;
}

#page_top a{
position: relative;
display: block;
width: 40px;
height: 40px;
text-decoration: none;
}

#page_top a::after{
content: '▲';
font-size: 14px;
font-weight: bold;
color: #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}


/* テーブル----------------------- */
table {
  border-collapse: collapse;
  margin: 0px 0px auto;
  white-space: nowrap;
  text-align: left;
  }
table td {
  border: 1px solid #;
}

table tr:nth-child(odd) td {  
  background-color:  #F7F7F7;  
}
table tr:nth-child(even) td {  
  background-color: #EFEFEF;  
}  

table th {
  background-color: white;
  text-align: left;
  color: black;
  font-family: 'Vidaloka', MS Pゴシック, sans-serif;
  font-size: 16px;
  font-weight: normal;
  vertical-align: top;
}

.table3{
  width: 100%;
  border-spacing: 0;
  margin: 10px 0px auto;
  table-layout: fixed;
  font-size: 18px;
}

.table3 th{
  border-bottom: solid 2px #ddd;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
 }

.table3 td{
  border-bottom: solid 2px #ddd;
  text-align: center;
  padding: 10px 0;
 }
.table3 td:nth-child(1){
  width: 110px;
}

/*問合せボタン*/

a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}

a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn-c {
  font-size: 2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}

/ケース紹介フォーム/-------------------

.accbox {
    margin: 2em 0;
    padding: 0;
    width: 100%;
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #fff;
    font-weight: bold;
    background: #1A237E;
    cursor :pointer;
    transition: all 0.5s;
	font-size: 2rem;
}

/*アイコンを表示*/
.accbox label:before {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#3366ff;
}

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

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

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px;
    font-size: 2.5rem;
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}

/* よくあるご質問フォーム----------------------- */

dl.qa {
 overflow: hidden;
 _zoom: 1;
}
 
dl.qa dd,
dl.qa dt {
 text-indent: -2.6em; 
 padding: 0 20px 0px 50px;
  font-size: 18px;
}
 
dl.qa dt {
 margin: 20px 20px 0 0;
}
 
dl.qa dd:first-letter,
dl.qa dt:first-letter {
 font-size: 2em;
 font-weight: bold;
 margin-right: 10px;
 padding: 5px;
}
 
dl.qa dd {
 margin: 10px 0 -1px 0;
 padding-bottom: 20px;
 border-bottom: solid 1px #aaa;
}
 
dl.qa dt:first-letter {
 color: #3498db;
}
 
dl.qa dd:first-letter {
 color: #ff6767;
}


/* 問い合わせフォーム----------------------- */
.form {
  background-color: #eaeaea;
  padding: 20px 10px;
  color: black;/*文字色*/
  text-align: left;
  font-family: 'Vidaloka', MS Pゴシック, sans-serif;
  font-size: 20px;
  font-weight: normal;
  vertical-align: top;
  width:70%;
  margin: 50px auto 0;
}

.form dl dt {
  width: 80%;
  margin: 10px 20px auto;
  text-align: left;
  font-family: 'Vidaloka', MS Pゴシック, sans-serif;
  font-size: 20px;
  font-weight: normal;
}

.form dl dd {
  width: 100%;
  padding: 0px 0px;
}

.form .name {
  width: 100%;
  height: 30px;
}

.form .kana {
  width: 100%;
  height: 30px;
}

.form .email {
  width: 100%;
  height: 30px;
}

.form .tel {
  width: 100%;
  height: 30px;
}

.form .type {
  width: 100%;
  height: 30px;
}

.form .message {
  width: 100%;
  height: 200px;
}

.form .company {
  width: 100%;
  height: 30px;
}

.form .post {
  width: 100%;
  height: 30px;
}

.form .position {
  width: 550px;
  height: 30px;
}

.form .address {
  width: 100%;
  height: 30px;
}

.form button {
  background-color: #1A237E;
  color: #ffffff;
  font-size: 20px;
  width: 120px;
  display: block;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
  border: 3px solid #1A237E;
  margin-left: 0px;
}

.form button:hover {
  background-color: #ffffff;
  color: #1A237E;
  cursor: pointer;
}

.form .required:after{
  content: "*";
  color: #ff0000;
}

.form .attention{
  margin-top: 10px;
  margin-left: 0px;
}

input {
font-size: 100%;
}

textarea {
font-size: 100%;
}


/* フッタ----------------------- */
/* ---------------------------------------------- */
footer {
display: flex;
flex-flow: column;
justify-content: center;
bottom: 0;
clear:both;
background: #1A237E;
padding: 20px;
}

footer p {
display: block;
text-align: center;
font-family: Tahoma, Geneva, MS Pゴシック, sans-serif;
font-size: 7px;
color: #e5dc81;
}


/* レスポンシブ----------------------- */
@media(max-width: 759px){
 
  .site-title-sub::before,
  .site-title-sub::after{
    display: block;
    width: 80%;
    margin: 10px auto;
  }

  .site-title-sub{
    font-size: 2rem;
    text-align: center;
  }
  
  .site-title{
    margin-top: 35px;
    font-size: 3rem;
  }
  
  .header{
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
       	  background-size: cover;
	  background-attachment: local;
	  width: 100%;
  }
  
  .button:hover{
    opacity: 1;
  }
  
  .heading{
    font-size: 2.3rem
  }

    p.site-description{
        font-size: 1.4rem;
    }
  
  .skills-wrapper,
  .skills-box, {
    display: block;    
  }

  .skills-box {
    display: block;    
  }
  
  .skill-icon {
    width: 100px;
    height: 100px;
    font-size: 5rem;
    line-height: 92px;    
  }
  
  .skills-box{
    margin: 40px auto;
  }
  
  .skill-text{
    margin: 0;
  }
    
  .choice-wrapper,
  .choice-box, {
    display: block;    
  }

  .choice-box {
    display: block;    
  }
  
  .choice-icon {
    width: 100px;
    height: 100px;
    font-size: 5rem;
    line-height: 92px;    
  }
  
  .choice-box{
    margin: 40px auto;
  }
  
  .choice-text{
    margin: 0;
  }    
  
    
  .form{
    width: 80%;
  }
  
  .lawyer1{
        display: block;
    }    
    
  .about-wrapper{
  width: 100%;
  margin: 50px auto 0;
}
  
  .lawyer-wrapper{
  width: 100%;
  margin: 50px auto 0;
}
  
  .fee-wrapper{
  width: 100%;
  margin: 50px auto 0;
}
  
  .explain-wrapper{
    margin: 0;
    width: 100%;
  }
  
  .flow-wrapper{
    margin: 0;
    width: 100%;
  }

  .privacy-wrapper{
    margin: 0;
    width: 100%;
  }
  
  .concept2 p{
        margin: 0;
       font-size: 1.3rem;
    }

    
   .lawyer-text{
        margin: 0;
       font-size: 1.5rem;
    }
    
  p{
       font-size: 1.5rem;
  }

  .logo{
    float: none;
	  display: none;
  }
	
	.lawyer-image1{
		margin-bottom: 40px;
	}
  
}