@charset "utf-8";

/* ベース
/************************************************************/
html {
  font-size: 62.5%;
}
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  overflow-wrap: break-word;
  word-break: normal;
  color: #111;
  background-color: #FFFFFF;
  font-size: 1.6rem;
}
*, *:before, *:after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
  transition: all .2s ease;
}
a {
  color: #006FFF;
  text-decoration: none;
  transition: all .2s ease;
}
a:hover {
  opacity: .6;
}



/* WPテーマカスタマイズ
/************************************************************/
#main {
  float: none;
}
#footer {
  display: none;
}
#page-top {
  display: none;
}
#mobile-buttons {
  display: none;
}
.grid {
    padding: 0;
}
#primary, #pnavi, #section, .grid {
    border: none;
}
#section, .grid {
    margin: 0;
}
.term {
    margin-right: 0;
}
.term img {
    margin-bottom: 12px;
    border-radius: 0px;
    float: none;
    max-width: 100%;
    width: auto;
    height: auto;
    border: none;
}
.entry-title a:hover {
    color: #111;
}
.meta, .post .meta {
    margin: 0;
    color: #858585;
    padding: 0;
}
.meta i {
    display: none;
}
.meta a {
    display: inline-block;
    color: #111;
    text-decoration: none;
}
.meta .date {
margin-right: 16px;
letter-spacing: 0.04em;
}

/* 共通要素
/************************************************************/
main {
margin-top: 88px;
}
.container {
  position: relative;
  width: 1024px;
  max-width: 1024px;
  margin: 0 auto;
}
.anchor {
  position: relative;
  top: -88px;
}
.hide-pc {
  display: none;
}
h1 {
font-size: 3.2rem;
}
h2 {
font-size: 2.8rem;
}
h3 {
font-size: 2.4rem;
}
.heading {
  margin-bottom: 48px;
  text-align: center;
}
.heading h1 {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 32px;
}
.heading h2 {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 32px;
}

/* ヘッダー
/************************************************************/
header {
  background-color: #133588;
  position: fixed;
  width: 100%;

  height: 88px;
  z-index: 100;
  top: 0;
  box-sizing: border-box;
  padding: 28px 0px;
}
header .header-logo {
position: absolute;
left: 40px;
}
header .header-logo img {
position: relative;
top: -1px;
}
header .header-logo p {
  color: #fff;
  font-size: 1.2rem;
  line-height: 32px;
  display: inline;
  margin-left: 24px;
}
header .header-nav {
position: absolute;
right: 40px;
left: 440px;
}
header .header-nav ul {
  text-align: right;
  letter-spacing: -.4em;
}
header .header-nav li {
  display: inline-block;
  margin-right: 32px;
  padding-right: 32px;
  border-right: solid 1px #425DA0;
  letter-spacing: normal;
  line-height: 32px;
}
header .header-nav li:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}
header .header-nav li a {
  font-size: 1.4rem;
  color: #fff;
}


/* SPメニュー
/************************************************************/

#sp-nav {
  /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
  position: fixed;
  z-index: -1;
  opacity: 0; /*はじめは透過0*/
  /*ナビの位置と形状*/
  top: 0;
  width: 100%;
  height: 100vh; /*ナビの高さ*/
  background-color: rgba(0, 0, 0, 0.8);
  /*動き*/
  transition: all 0.3s;
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#sp-nav.panelactive {
  opacity: 1;
  z-index: 999;
}
/*ナビゲーションの縦スクロール*/
#sp-nav.panelactive #sp-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh; /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#sp-nav ul {
  display: none;
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48%;
}
#sp-nav.panelactive ul {
  display: block;
}
/*リストのレイアウト設定*/
#sp-nav li {
  list-style: none;
  text-align: center;
  margin-top: 12px;
}
#sp-nav li a {
  text-decoration: none;
  display: block;
  background-color: #FFFF;
  color: #222;
  font-weight: 500;
  border-radius: 4px;
  line-height: 48px;
  letter-spacing: 0.1em;
  font-size: 1.4rem;
}
#sp-nav li a.contact {
  color: #fff;
  background-image: linear-gradient(to right, #EC6108, #F5BC02);
}

/*ボタン*/
.openbtn {
  position: fixed;
  z-index: 9999; /*ボタンを最前面に*/
  top: 20px;
  right: 24px;
  cursor: pointer;
  width: 48px;
  height: 48px;
}
/*×に変化*/
.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 13px;
  height: 2px;
  background-color: #fff;
  width: 45%;
}
.openbtn span:nth-of-type(1) {
  top: 15px;
}
.openbtn span:nth-of-type(2) {
  top: 23px;
}
.openbtn span:nth-of-type(3) {
  top: 31px;
}
.openbtn.active span:nth-of-type(1) {
  top: 17px;
  left: 16px;
  transform: translateY(6px) rotate(-45deg);
  width: 35%;
  background-color: #fff;
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
  top: 29px;
  left: 16px;
  transform: translateY(-6px) rotate(45deg);
  width: 35%;
  background-color: #fff;
}

/* フッター
/************************************************************/

.footer {
  padding: 40px 0px;
  box-sizing: border-box;
  font-size: 1.4rem;
  border-top: solid 1px #D9D9D9;
}
.footer .footer-nav {
  float: left;
}
.footer .footer-nav ul {
  letter-spacing: -.4em;
}
.footer .footer-nav  li {
  display: inline-block;
  margin-right: 24px;
  padding-right: 24px;
  border-right: solid 1px #ccc;
  letter-spacing: normal;
}
.footer .footer-nav  li:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}
.footer .footer-nav li a {
color: #111;
}

.footer .copyright {
  letter-spacing: 0.04em;
  float: right;
}


/* 一覧ページ
/************************************************************/

.category-nav {
border-bottom: solid 1px #D9D9D9;
margin-bottom: 80px;
}
.category-nav ul {
  letter-spacing: -.4em;
}
.category-nav li {
  letter-spacing: normal;
  margin-right: 56px;
  display: inline-block;
  padding-bottom: 32px;
}
.category-nav li a {
  font-weight: 500;
  color: #111;
}

.category-nav li.current {
  font-weight: 500;
color: #133588;
border-bottom: solid 2px #133588;
margin-bottom: -1px;

}
.writer-profile {
margin-bottom: 80px;

}

div[id^=tile-] .toc:not(#bottom-area):not(.posts-list-middle-widget):not(#bottom-area):not(.posts-list-under-widget) {
    padding: 0px;
}
div#tile-3::after {
	content: '';
	display: block;
	width: 31.2%;
}
#list #bottom-area,
#list .posts-list-under-widget {
	order: 1;
    margin-bottom: 0;
}
#tile-3 {
margin-top: -40px;
}
#tile-3 .toc {
    max-width: 31.2%;
    width: 31.2%;
}
#list .toc {
    margin: 40px 0 0;
}


div[id^=tile-] h2, div[id^=card-] h2 {
    font-size: 1.6rem;
    margin-bottom: 0;
}
#list .meta {
    margin: 12px 0 0;
}
#list a {
    word-break: normal;
    font-weight: 500;
}

div[id^=tile-] .meta {
    margin-bottom: 0px;
    font-size: 1.2rem;
}



/* ページネーションのカスタマイズ */
#bottom-area {
	margin-top: 48px;
}
#bottom-area .nav-links .page-numbers {
	margin: 0px 4px;
    font-family: 'Roboto';
	display: inline-block;
}
#bottom-area .nav-links a.page-numbers {
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 4px;
	line-height: 38px;
	text-align: center;
	width: 40px;
    color: #858585;
}
#bottom-area .nav-links .current {
	border: 1px solid #111;
	box-sizing: border-box;
	background-color: #222;
	border-radius: 4px;
	color: #FFFFFF;
	line-height: 38px;
	text-align: center;
	width: 40px;
}
#bottom-area .nav-links .prev {
	display: none;
}
#bottom-area .nav-links .next {
	display: none;
}


/* 共通コンテンツ
/************************************************************/

.contents {
  padding: 80px 0px;
}

.ranking-info {
  padding: 80px 0;
  border-top: solid 1px #D9D9D9;
}
.ranking-info .heading {
text-align: left;
margin-bottom: 40px;
}
.ranking-info .heading h2 {
display: inline-block;
}
.ranking-info .heading p {
font-size: 1.4rem;
display: inline-block;
position: relative;
top: -6px;
margin-left: 24px;
}


div#ranking-tile::after {
	content: '';
	display: block;
	width: 31.2%;
}
#ranking-tile {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -40px;
}
#ranking-tile .toc {
    max-width: 31.2%;
    width: 31.2%;
    margin: 40px 0 0;
}

#ranking-tile h2 {
    font-size: 1.6rem;
    margin-bottom: 0;
}
#ranking-tile a {
    word-break: normal;
    font-weight: 500;
}

#ranking-tile .toc .nth {
position: relative;
padding-left: 40px;
}
#ranking-tile .toc .nth::before {
font-family: 'Roboto';
background-color: #133588;
color: #fff;
position: absolute;
top: 4px;
left: 0;
width: 28px;
line-height: 28px;
text-align: center;
border-radius: 14px;
font-size: 1.5rem;
font-weight: 700;
}
#ranking-tile .toc:nth-child(1) .nth::before {
content: "1";
}
#ranking-tile .toc:nth-child(2) .nth::before {
content: "2";
}
#ranking-tile .toc:nth-child(3) .nth::before {
content: "3";
}
#ranking-tile .toc:nth-child(4) .nth::before {
content: "4";
}
#ranking-tile .toc:nth-child(5) .nth::before {
content: "5";
}
#ranking-tile .toc:nth-child(6) .nth::before {
content: "6";
}


.contact-info {
  padding: 64px 0;
text-align: center;
background-color: #333;
}
.contact-info p {
color: #fff;
font-size: 1.4rem;
}
.contact-info .btn {
margin: 32px auto 0;
width: 320px;
}
.contact-info .btn a {
display: block;
background-color: #fff;
color: #111;
text-align: center;
line-height: 48px;
border-radius: 24px;
font-weight: 500;
position: relative;
}
.contact-info .btn a::after {
font-family: "Material Icons";
content: "\e315";
position: absolute;
right: 20px;
font-size: 2.4rem;
}

.service-info {
  padding: 64px 0;
text-align: center;
}
.service-info p {
font-size: 1.4rem;
margin: 20px 0;
}

.writer-info {
text-align: center;
}
.writer-info a {
display: inline-block;
}
.writer-info .img {
border: solid 1px #ccc;
width: 160px;
box-sizing: border-box;
display: inline-block;
}

.writer-info .name  {
font-size: 2.0rem;
  font-weight: 500;
  color: #111;
  margin-top: 12px
}
.writer-info p {
font-size: 1.4rem;
margin: 24px 0;
line-height: 175%;
}

.sns-link ul {
  letter-spacing: -.4em;
}
.sns-link li{
display: inline-block;
margin: 0 6px;
letter-spacing: normal;
}
.sns-link li a{
border: solid 1px #ccc;
border-radius: 24px;
box-sizing: border-box;
padding: 8px;
display: block;
}





/* 詳細ページ
/************************************************************/

article .container {
  width: 768px;
}
#article-thumbnail {
  margin-bottom: 40px;
}
#article-head {
  margin: 0 auto;
  width: 640px;
  position: relative;
}
#article-head .entry-title {
    font-size: 3.2rem;
    margin: 0 0 32px;
    font-weight: 500;
}
#article-head .meta {
font-size: 1.2rem;
}
#article-head .meta .category a {
line-height: 1.0;
border: solid 1px #ccc;
padding: 10px 12px;
display: inline-block;
border-radius: 4px;
font-weight: 500;
}
#article-head .meta .category a::before {
content: "#";
margin-right: 4px;
}
#article-head .writer {
font-size: 1.2rem;
color: #858585;
position: absolute;
right: 0px;
bottom: 6px;
}
#article-head .writer a {
color: #111;
font-weight: 500;
text-decoration: none;
}

#article-main {
  margin: 80px auto 0;
  width: 640px;
}
.post h2 {
    border-left: none;
    font-size: 2.8rem;
    padding: 80px 0 0;
    margin-top: 80px;
    font-weight: 500;
    border-top: solid 1px #D9D9D9;
    line-height: 1.5;
}
.post h3 {
    border-left: solid 4px #133588;
    padding: 0 0 2px 12px;
    font-size: 2.0rem;
    font-weight: 500;
    margin: 64px 0 32px;
    line-height: 1.5;
    color: #133588;
}
.post h4 {
    font-size: 1.6rem;
    padding: 0;
    border: 0;
    border-left: none;
    font-weight: 700;
    margin: 32px 0 6px;
    color: #133588;
}
.post h4 + p {
margin: 0 0 32px;
}
.post h5 {
    background-color: #EDF2FA;
    padding: 20px 24px;
    line-height: 1;
    margin: 40px 0 2px;
    font-size: 1.4rem;
    font-weight: 500;
}
.post h5::before {
content: "▼";
margin-right: 4px;
}
.post p {
  line-height: 200%;
  margin: 32px 0;
}
.post ul {
  line-height: 200%;
  margin: 32px 0;
}
.post li {
list-style: disc;
}
.wp-block-code {
    margin: 0 0 40px;
}
.wp-block-code code {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    line-height: 175%;
    background-color: #EDF2FA;
    padding: 24px;
}

.post .tags {
margin: 80px 0 0;
}
.post .tags ul{
padding: 0;
margin: -12px 0 0;
}
.post .tags li {
float: left;
margin: 12px 12px 0 0;
list-style: none;
}
.post .tags li a {
line-height: 1.0;
border: solid 1px #ccc;
padding: 10px 12px;
display: inline-block;
border-radius: 4px;
font-weight: 500;
font-size: 1.2rem;
color: #111;
text-decoration: none;
}
.post .tags li a::before {
content: "#";
margin-right: 4px;
}
#article-writer {
border-top: solid 1px #D9D9D9;
padding: 88px 0 0;
margin-top: 96px;
position: relative;
}
#article-writer h2 {
position: absolute;
top: -18px;
left: 50%;                
transform: translateX(-50%); 
line-height: 1.0;
}
#article-writer h2 span {
color: #858585;
font-weight: 500;
font-size: 2.0rem;
background-color: #fff;
display: inline-block;
padding: 0 16px;
}

/* コロピクとは
/************************************************************/

.about .container {
  width: 768px;
}

.about-coropic {
border-bottom: solid 1px #D9D9D9;
margin-bottom: 80px;
padding-bottom: 80px;
text-align: center;
}
.about-coropic h3 {
font-weight: 700;
color: #133588;
margin: 48px 0;
}
.about-coropic p {
line-height: 200%;
margin-bottom: 32px;
}
.about-coropic p:last-child {
margin-bottom: 0;
}
.about-writer {
border-bottom: solid 1px #D9D9D9;
margin-bottom: 80px;
padding-bottom: 80px;
}
.about-writer p {
line-height: 200%;
margin-bottom: 64px;
}
.about-writer ul {
margin-top: -40px;
}
.about-writer li {
float: left;
width: 22%;
margin-right: 4%;
margin-top: 40px;
text-align: center;
}
.about-writer li:nth-child(4n) {
margin-right: 0;
}

.about-writer li a {
display: inline-block;
color: #111;
}
.about-writer li .img {
border: solid 1px #ccc;
margin-bottom: 12px;
}
.about-writer li .name {
  font-weight: 500;
}


.accordion  {
background: #EDF2FA;
margin-top: 8px;
}
.accordion_q {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 32px;
  color: #133588;
  font-weight: 500;
}
.accordion_q h3 {
font-size: 1.6rem;
padding-left: 32px;
font-weight: 500;
}
.accordion_q::before {
  content: "Q.";
  font-weight: 700;
  letter-spacing: 0.2em;
  position: absolute;
  line-height: 1.2;
}
.accordion_q::after {
  content: "＋";
  position: absolute;
  top: calc(50% - 0.5em);
  right: 32px;
  line-height: 1;
  padding: 0;
  pointer-events: none;
  font-weight: 700;
}
.accordion .accordion_a {
  padding: 0 64px 32px 32px;
}
.accordion .accordion_a p {
  line-height: 200%;
}
.accordion[open] .accordion_q {
  padding: 32px 32px 24px;
}
.accordion[open] .accordion_q::after {
  content: "－";
}


/* プライバシーポリシー
/************************************************************/

.privacy .container {
  width: 768px;
}

.privacy section {
border-top: solid 1px #D9D9D9;
padding-top: 48px;
margin-bottom: 48px;
}
.privacy section:last-child {
margin-bottom: 0px;
}
.privacy h3 {
border-left: solid 4px #000;
padding: 0 0 2px 12px;
font-size: 2.0rem;
font-weight: 500;
line-height: 24px;
margin-bottom: 32px;
}
.privacy p {
line-height: 200%;
}
.privacy ul {
margin: 32px 0;
}
.privacy li {
line-height: 200%;
position: relative;
padding-left: 24px;
}
.privacy li::before {
content: "・";
position: absolute;
font-weight: 700;
left: 0;
}


/* 運営会社
/************************************************************/

.company .container {
  width: 768px;
}

.company dl {
border-top: solid 1px #D9D9D9;
padding: 32px 0;
display: table;
width: 100%;
}
.company dl:last-child {
padding: 32px 0 0;
}
.company dl dt {
font-weight: 500;
display: table-cell;
width: 160px;
}
.company dl dd {
display: table-cell;
}

/* お問い合わせ
/************************************************************/

.form .container {
  width: 768px;
}

.form p {
margin: 32px 0;
text-align: center;
}
.form .form-table {
	display:table;
	width:100%;
    margin-bottom: 16px;
}
.form .form-table-th {
	background-color:#EDF2FA;
	padding: 24px 24px;
	display:table-cell;
	width:280px;
	vertical-align:top;
	box-sizing: border-box;
	line-height: 40px;
}
.form .form-table-th em {
	background-color:#FF6666;
	font-size: 1.2rem;
	color: #FFFFFF;
	padding: 0px 8px;
	position: relative;
	top: -1px;
	margin-right: 12px;
	display: inline-block;
	border-radius: 4px;
	line-height: 24px;
    font-weight: 500;
}

.form .form-table-td {
	background-color:#EDF2FA;
	padding: 24px;
	display:table-cell;
	vertical-align:middle;
	box-sizing: border-box;
}
.form .form-table-td em {
	display:block;
	padding: 4px 0px 0px;
  color: #999;
}
.form .form-table-td input {
	font-family: 'Noto Sans JP', sans-serif;
	padding: 0px 12px;
	width:64%;
	border:1px solid #96A6CC;
	line-height: 40px;
    border-radius: 4px;
	font-size: 1.6rem;
}

.form .form-table-td input::placeholder {
  color: #999;
}

.form .form-table-td input[type="checkbox"] {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #96A6CC;
  background-color: #fff;
  appearance: none;
margin: 0 12px -6px 0;

}

.form .form-table-td input[type="checkbox"]:checked:before {
  position: absolute;
  top: 4px;
  left: 8px;
  transform: rotate(50deg);
  width: 6px;
  height: 12px;
  border-right: 3px solid #006FFF;
  border-bottom: 3px solid #006FFF;
  content: '';
}
.form .form-table-td label {
	line-height: 40px;
}

.form .form-table-td textarea {
	font-family: 'Noto Sans JP', sans-serif;
	padding: 12px 12px;
	width:96%;
	height:140px;
	border:1px solid #96A6CC;
	resize:vertical;
    border-radius: 4px;
	font-size: 1.6rem;
}
.form .form-table-td select {
	font-family: 'Noto Sans JP', sans-serif;
	padding: 0px 8px;
	border:1px solid #96A6CC;
	line-height: 40px;
}
.form .form-table-td select option {
	font-family: 'Noto Sans JP', sans-serif;
}
.form .form-table-td select optgroup {
	font-family: 'Noto Sans JP', sans-serif;
}