/*!
Theme Name: SmileStar
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: SmileStar
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

smilestar is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  font-size: 62.5%;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 3rem;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: #191919;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体",
    "Yu Gothic", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-size: 1.4rem;
  line-height: 1.85;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  margin: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.4rem;
  line-height: 1.85;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体",
    "Yu Gothic", YuGothic, "メイリオ", "Meiryo", sans-serif;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: "Courier 10 Pitch", courier, monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1rem 0;
  padding: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
  list-style-position: inside;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Links
--------------------------------------------- */
a {
  color: #303c73;
}

a:visited {
  color: #191919;
}

a:hover,
a:focus,
a:active {
  color: #303c73;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
  opacity: 0.8;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  /*border: 1px solid;*/
  /*border-color: #ccc #ccc #bbb;*/
  /*border-radius: 3px;*/
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  /*border-color: #ccc #bbb #aaa;*/
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  /*border-color: #aaa #bbb #bbb;*/
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #191919;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #191919;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

.wpcf7-submit {
  color: #fff !important;
  background-color: #db7993 !important;
  cursor: pointer;
  font-weight: 700;
  margin-top: 10px;
  width: 100%;
  display: block;
  border: none !important;
  padding: 13px !important;
  border-radius: 5px;
  background: #f2f2f2;
  max-width: 200px;
  margin: 0 auto;
}
/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mt-5 {
  margin-top: 5rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.mb-5 {
  margin-bottom: 5rem;
}

.site-header {
  position: fixed;
  z-index: 20;
  background: rgb(236 241 244 / 50%);
  transition: all 0.5s ease-in-out;
  left: 0;
  right: 0;
  margin: auto;
}

.site-header-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0;
}

.site-branding {
  width: 100%;
  max-width: 250px;
}

footer {
  color: #ffffff;
  background: #303c73;
}

.footer-container {
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.flogo {
  max-width: 250px;
  width: 100%;
}

.flogo img {
  vertical-align: middle;
}

p.copy {
  max-width: 1100px;
  width: 100%;
  color: #ffffff;
  font-size: 1.2rem;
  text-align: center;
  margin: 0 auto;
  padding: 2em 0;
  border-top: 1px solid #ffffff;
}

.site-main {
  max-width: 1100px;
  width: 96%;
  margin: 0 auto;
  padding-top: 15rem;
}

.home .site-main {
  padding-top: 0;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

.pc_visible {
  display: block;
}

.sp_visible {
  display: none;
}

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

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

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  line-height: 1.5;
  border-radius: 5px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
}

.btn-primary {
  position: relative; /* transitionの使用によるz値の依存対策のため*/
  color: #3f3f3f;
  border-color: #3f3f3f;
  z-index: 1;
  font-size: 1.2rem;
}

.totop {
  position: fixed;
  bottom: 0;
  right: 0;
  display: block;
  background-color: #303c73;
  color: #fff !important;
  width: 40px;
  height: 40px;
  z-index: 999;
}

.totop:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  transform: rotate(-45deg);
  margin-top: -3px;
  margin-right: -6px;
  width: 12px;
  height: 12px;
  border-top: 3px solid;
  border-right: 3px solid;
  transition: 0.3s;
}

.cta {
  color: #ffffff;
  padding: 6em 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.home .cta h2 {
  color: #ffffff;
  font-size: 3.2rem;
  font-weight: bold;
  border: none;
  padding: 0;
  line-height: 1.2;
}

.cta h2 + p {
  margin-bottom: 1.4rem;
}

.cta .row {
  position: relative;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.cta .col-6 {
  height: auto;
  width: 31%;
  margin-top: 2rem;
}

.cta a.btn {
  display: block;
  font-size: 1.8rem;
  color: #ffffff;
  padding: 0.8em 0;
  text-align: center;
  border-radius: 0;
  border: 1px solid #ffffff;
  margin: 0.5em 1em 1em 1em;
  transition: all 0.3s ease;
  text-decoration: none;
}

.cta .col-6 p {
  font-size: 88%;
}

.cta .social {
  width: 260px;
  margin: 20px auto 0;
}

.cta .social a {
  font-size: 1.8rem;
  width: 42px;
  height: 42px;
  color: #ffffff;
  border-radius: 100%;
  padding: 0 4px;
}

.line_banner {
  margin-top: 50px;
  margin-bottom: 80px;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul.menu,
.widget > ul {
  border-top: dotted 1px rgba(0, 0, 0, 0.1);
}

.widget-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  background-color: #303c73;
  color: #ffffff;
  margin: 0 0 20px;
  padding: 10px 10px 10px 20px;
}

.widget-title::after,
.widget-title::before {
  content: "";
  position: absolute;
}

.widget-title::before {
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.widget-title::after {
  top: 50%;
  left: 0;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  background: #ffffff;
}

.widget.widget_categories ul,
.widget.widget_nav_menu ul.menu {
  border-top: none;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: rgba(128, 174, 191, 0.15);
}

.widget.widget_categories ul li:first-child,
.widget.widget_nav_menu ul.menu li:first-child {
  border: none;
}

.widget.widget_categories ul li,
.widget.widget_nav_menu ul.menu li {
  border-top: 1px solid rgba(128, 174, 191, 0.75);
}

.widget.widget_categories ul li a {
}

.widget.widget_categories ul li a,
.widget.widget_nav_menu ul.menu li a {
  display: block;
  color: #fff;
  background-color: #303c73;
  border: none;
  line-height: 1.5;
  padding: 15px 10px;
  transition: 0.15s;
  text-decoration: none;
}

.widget.widget_categories ul li a:before,
.widget.widget_nav_menu ul.menu li a:before {
  font-family: icomoon;
  content: "\ea55";
  font-size: 1rem;
  margin-right: 5px;
  color: #fff;
}

.widget.widget_categories .post_count {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 1rem;
  line-height: 20px;
  background: #f2f2f2;
  min-width: 20px;
  min-height: 20px;
  margin-left: 1rem;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}

.widget.widget_archive ul li a,
.widget.widget_meta ul li a,
.widget.widget_nav_menu ul li a,
.widget.widget_pages ul li a {
  display: block;
  color: #191919;
  text-decoration: none;
  border-bottom: dotted 1px rgba(0, 0, 0, 0.1);
  line-height: 1.5;
  padding: 15px 10px;
  transition: 0.15s;
}

.widget.widget_archive .post_count {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 1rem;
  line-height: 20px;
  background: #f2f2f2;
  min-width: 20px;
  min-height: 20px;
  margin-left: 1rem;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}

.widget.widget_recent_entries ul li {
  display: block;
  border-bottom: dotted 1px rgba(0, 0, 0, 0.1);
  line-height: 1.5;
  padding: 15px 10px;
}

.widget.widget_recent_entries ul li a {
  display: inline-block;
  color: #191919;
  text-decoration: none;
}

.widget.widget_recent_comments ul li {
  display: block;
}

.widget.widget_recent_comments ul li,
.widget.widget_rss ul li {
  border-bottom: dotted 1px rgba(0, 0, 0, 0.1);
  line-height: 1.5;
  padding: 15px 10px;
}

.widget.widget_recent_comments ul li a {
  display: inline-block;
  color: #191919;
  text-decoration: none;
}

.widget.widget_calendar td {
  text-align: center;
}

.search-form {
  display: flex;
}

.search-form label {
  width: calc(100% - 4rem);
  border: 2px solid #d8d8d8;
  border-radius: 0;
}

.search-form .search-field {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0 0 0 10px;
}

.search-field:focus {
  outline: none;
}

.search-form button {
  width: 4rem;
  cursor: pointer;
  text-align: center;
  background: #f2f2f2;
  border-left: 0;
  border-right: 2px solid #d8d8d8;
  border-top: 2px solid #d8d8d8;
  border-bottom: 2px solid #d8d8d8;
  padding: 10px;
}

.search-submit:before {
  font-family: icomoon;
  content: "\e986";
}

.widget.widget_tag_cloud .tagcloud {
  margin-bottom: -5px;
}

.widget.widget_tag_cloud a {
  display: inline-block;
  font-size: 1.2rem !important;
  line-height: 1.35;
  color: #191919;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0 5px 5px 0;
  padding: 10px;
  transition: 0.15s;
  text-decoration: none;
}

.widget.widget_tag_cloud a::before {
  font-family: icomoon;
  content: "\e935";
  margin-right: 5px;
  font-size: 1rem;
}

.widget select {
  border: 2px solid #d8d8d8;
  width: 100%;
  padding: 10px;
  border-radius: 0;
}

.posted-on {
  margin-right: 1rem;
}

.cat-links,
.tags-links {
  margin-right: 1rem;
}

.cat-links a,
.tags-links a {
  color: inherit;
  text-decoration: none;
}

.left article .marker-thickRed {
  background: linear-gradient(transparent 35%, #ffc6c6 35%);
}
.left article .marker-thickBlue {
  background: linear-gradient(transparent 35%, #cce5ff 35%);
}
.left article .marker-thickYellow {
  background: linear-gradient(transparent 35%, #ffffbc 35%);
}
.left article .marker-thickPink {
  background: linear-gradient(transparent 35%, #ffdfef 35%);
}
.left article .marker-thickGreen {
  background: linear-gradient(transparent 35%, #d2ffd2 35%);
}
.left article .marker-thickGray {
  background: linear-gradient(transparent 35%, #d8d8d8 35%);
}
.left article .marker-halfRed {
  background: linear-gradient(transparent 60%, #ffc6c6 60%);
}
.left article .marker-halfBlue {
  background: linear-gradient(transparent 60%, #cce5ff 60%);
}
.left article .marker-halfYellow {
  background: linear-gradient(transparent 60%, #ffffbc 60%);
}
.left article .marker-halfPink {
  background: linear-gradient(transparent 60%, #ffdfef 60%);
}
.left article .marker-halfGreen {
  background: linear-gradient(transparent 60%, #d2ffd2 60%);
}
.left article .marker-halfGray {
  background: linear-gradient(transparent 60%, #d8d8d8 60%);
}
.left article .marker-thinRed {
  background: linear-gradient(transparent 85%, #ffc6c6 85%);
}
.left article .marker-thinBlue {
  background: linear-gradient(transparent 85%, #cce5ff 85%);
}
.left article .marker-thinYellow {
  background: linear-gradient(transparent 85%, #ffffbc 85%);
}
.left article .marker-thinPink {
  background: linear-gradient(transparent 85%, #ffdfef 85%);
}
.left article .marker-thinGreen {
  background: linear-gradient(transparent 85%, #d2ffd2 85%);
}
.left article .marker-thinGray {
  background: linear-gradient(transparent 85%, #d8d8d8 85%);
}
.left article .border-black {
  padding: 15px;
  border: 2px solid #333;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 16%);
  word-break: break-all;
}
.left article .border-black p:first-child {
  margin-top: 0;
}
.left article .border-blue {
  padding: 15px;
  border: 2px solid #303c73;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 16%);
  word-break: break-all;
}
.left article .border-blue p:first-child {
  margin-top: 0;
}
.left article .border-midashi {
  margin-top: 25px;
  padding: 15px;
  border-top: 1px solid #b4b4b4;
  border-bottom: 1px solid #b4b4b4;
}
.left article .border-midashi p:first-child {
  margin-top: 0;
}
.left article .border-midashi-bold {
  margin-top: 25px;
  padding: 15px 0;
  border-top: 2px solid #b4b4b4;
  border-bottom: 2px solid #b4b4b4;
}
.left article .border-midashi-bold p:first-child {
  margin-top: 0;
}
.qestion-midashi {
  background: #ecf1f4;
  color: #303c73;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
}
.answer-midashi {
  background: #fdf2f5;
  color: #db7993;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
}

.left article table {
  margin-top: 2rem;
  width: 100%;
  font-size: 1.4rem;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 0;
  border-bottom: 0;
  border-top-color: #e5e5e5;
  border-left-color: #e5e5e5;
}

.left article table th {
  color: #ffffff;
  text-align: left;
  background: #7f7f7f;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-right-color: #e5e5e5;
  border-bottom-color: #e5e5e5;
  padding: 10px;
}

.left article .scoreTable tr:nth-child(odd) td,
.left article table tr:nth-child(odd) td {
  background-color: #f2f2f2;
}

.left article table td {
  padding: 10px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-right-color: #e5e5e5;
  border-bottom-color: #e5e5e5;
}

.partsTable-1 table {
  border-top: 1px dotted #e5e5e5;
  border-left: 1px dotted #e5e5e5;
}

.partsTable-1 table td,
.partsTable-1 table th {
  border-right: 1px dotted #e5e5e5;
  border-bottom: 1px dotted #e5e5e5;
}

.left article .tableScroll table td,
.left article .tableScroll table th {
  min-width: 160px;
}

.left article .scoreTable {
  border: 1px solid #e5e5e5;
}

.left article .scoreTable td {
  border: 0;
}

.left article .scoreTable td:first-child {
  font-weight: 700;
}

.left article .scoreTable td:last-child {
  width: 140px;
}

.left article .scoreTable-red tr:last-child td {
  background-color: #fdedec;
}
.left article .scoreTable-blue tr:last-child td {
  background-color: #eaf6fe;
}
.left article .scoreTable-yellow tr:last-child td {
  background-color: #fffded;
}
.left article .scoreTable-pink tr:last-child td {
  background-color: #fdeff5;
}
.left article .scoreTable-green tr:last-child td {
  background-color: #ebf5eb;
}
.left article .scoreTable-gray tr:last-child td {
  background-color: #d8d8d8;
}

.sns_btn {
  display: flex;
  margin-top: 6rem;
}

.sns_btn a {
  display: block;
  width: 20%;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.sns_btn a:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  display: inline-block;
  margin-right: 3px;
  text-align: center;
  font-size: 2rem;
}

.btn-facebook:before {
  content: "\f082";
}

.btn-facebook {
  background: #3b5998;
}

.btn-twitter {
  background: #00b0ed;
}

.btn-line {
  background: #25af00;
}

.btn-hatena {
  background: #008fde;
}

.btn-pocket {
  background: #ef3f56;
}

.btn-twitter:before {
  content: "\f099";
}

.sns_btn a.btn-hatena:before {
  font-family: icomoon;
  content: "\e900";
}

.btn-line:before {
  content: "\f3c0";
}

.btn-pocket:before {
  content: "\f265";
}

.comment-respond label {
  display: inline-block;
  font-weight: 700;
}

.comment-respond input,
.comment-respond textarea {
  width: 100%;
  display: block;
  border: none;
  padding: 10px;
  border-radius: 5px;
  background: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.comment-respond .comment-form-author,
.comment-respond .comment-form-comment,
.comment-respond .comment-form-email,
.comment-respond .comment-form-url,
.comment-respond .comment-notes,
.comment-respond .logged-in-as {
  margin-bottom: 20px;
}

.comment-respond .submit {
  color: #fff;
  background-color: #303c73;
  cursor: pointer;
  font-weight: 700;
  margin-top: 10px;
}

.profile {
  display: flex;
  border: 5px solid rgba(0, 0, 0, 0.05);
  background: #fff;
  margin-top: 4rem;
  padding: 2rem;
}

.prof_author {
  width: 35%;
  text-align: center;
  margin-bottom: 2rem;
}

.author_text {
  background: #efefef;
  font-size: 1.6rem;
  padding: 15px;
  margin-bottom: 20px;
}

.prof_author img {
  width: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.author_name {
  font-size: 1.6rem;
  margin-bottom: 5px;
}

.author_name a {
  color: #191919;
  text-decoration: none;
}

.author_contents {
  width: calc(65% - 1px);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  margin-left: 20px;
  padding: 0px 0 0 20px;
}

.author_sns {
  display: flex;
  list-style: none;
}

.author_sns_item {
  margin: 1.5rem 1rem 1.5rem 0rem;
}

.author_sns a {
  text-decoration: none;
}

.author_link.icon-facebook {
  display: block;
  background: #3b5998;
  font-size: 1.6rem;
  line-height: 4rem;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  text-align: center;
  transition: 0.15s;
  color: #fff;
}

.author_link.icon-twitter {
  display: block;
  background: #00b0ed;
  font-size: 1.6rem;
  line-height: 4rem;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  text-align: center;
  transition: 0.15s;
  color: #fff;
}

.author_link.icon-youtube {
  display: block;
  background: #cd201f;
  font-size: 1.6rem;
  line-height: 4rem;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  text-align: center;
  transition: 0.15s;
  color: #fff;
}

.btn_link-secondary {
  width: 100%;
}

.btn-secondary {
  background: #2f448e;
  color: #fff !important;
  width: 100%;
  padding: 0.5rem;
}

.author_sns {
  margin-bottom: 1rem !important;
}

.comment-body {
  margin-bottom: 2rem;
}

.comment-list li {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 15px 15px 0;
  margin-bottom: 20px;
}

.comment-meta {
  background: none;
}

.comment-author.vcard {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}

.comment-author.vcard img {
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}

.comments__list .says {
  display: none;
}

.comment-metadata {
  width: 100%;
  margin-bottom: 10px;
  background: #2f448e;
  padding: 2px 10px;
  border-radius: 5px;
}

.comment-metadata a {
  color: #fff;
  text-decoration: none;
}

.comment-list .reply {
  width: 100%;
  text-align: right;
}

.comment-list .reply a {
  display: inline-block;
  position: relative;
  font-size: 1.2rem;
  line-height: 1;
  padding: 10px 20px;
  border-radius: 5px;
  color: #191919;
  border: 1px solid;
  text-decoration: none;
}

.comment-list .children li {
  background: #f2f2f2;
}

.related-posts {
  margin-top: 4rem;
}

.related-post {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  padding-bottom: 20px;
}

.related-post li {
  display: flex;
  width: 100%;
  align-items: flex-start;
  padding-bottom: 20px;
}

.related_item .eyecatch {
  position: relative;
  display: block;
  max-width: 200px;
  width: 100%;
  height: 110px;
  overflow: hidden;
}

.related_item .eyecatch img {
  height: 100%;
  object-fit: cover;
  transition-duration: 0.3s;
}

.related_item .eyecatch a:hover img {
  transform: scale(1.2);
}

.related_item .eyecatch span {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: #303c73;
  max-width: calc(100% - 3rem);
}

.related_item .eyecatch span a {
  display: block;
  padding: 7.5px 10px;
  color: #fff;
  font-size: 1rem;
  transition: 0.15s;
  line-height: 1.35;
  text-decoration: none;
}

.related_item .related_contents {
  position: relative;
  width: 100%;
  margin-left: 15px;
}

.related_item .related_contents a {
  color: #191919;
  text-decoration: none;
}

#breadcrumb {
  font-size: 0.7rem;
  margin-bottom: 1.5rem;
}

#breadcrumb ul {
  margin: 0;
}

#breadcrumb ul li {
  list-style: none;
}

#breadcrumb li {
  position: relative;
  display: block;
  color: #191919;
  float: left;
  display: table-cell;
  white-space: nowrap;
  padding-right: 15px;
  padding-left: 15px;
  font-size: 1.2rem;
  line-height: 1.75;
}

#breadcrumb li:first-child {
  padding-left: 0;
}

#breadcrumb li a {
  color: inherit;
  text-decoration: none;
}

#breadcrumb li .fa-home::before {
  color: #303c73;
}

#breadcrumb li .fa-home::before {
  display: inline-block;
  margin-right: 0.3rem;
}

#breadcrumb li:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -3px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
  transform: rotate(45deg);
}

#breadcrumb li:last-child:after {
  content: none;
}

.wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}

.wp-block-embed__wrapper iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 780px) {
  .pc_visible {
    display: none;
  }

  .sp_visible {
    display: block;
  }

  .cta .col-6 {
    width: 100%;
  }

  .profile {
    display: block;
    border: 5px solid rgba(0, 0, 0, 0.05);
    background: #fff;
    margin-top: 4rem;
    padding: 2rem;
  }

  .prof_author {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
  }

  .author_text {
    background: #efefef;
    font-size: 1.6rem;
    padding: 15px;
    margin-bottom: 20px;
  }

  .prof_author img {
    width: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
  }

  .author_contents {
    width: 100%;
    border-left: none;
    margin-left: 0px;
    padding: 0px;
  }

  .author_sns {
    display: flex;
    list-style: none;
    justify-content: center;
  }

  .author_sns_item {
    margin: 1.5rem 1rem 1.5rem 0rem;
  }

  .author_sns a {
    text-decoration: none;
  }

  .author_link.icon-facebook {
    display: block;
    background: #3b5998;
    font-size: 1.6rem;
    line-height: 4rem;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    text-align: center;
    transition: 0.15s;
    color: #fff;
  }

  .author_link.icon-twitter {
    display: block;
    background: #00b0ed;
    font-size: 1.6rem;
    line-height: 4rem;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    text-align: center;
    transition: 0.15s;
    color: #fff;
  }

  .author_link.icon-youtube {
    display: block;
    background: #cd201f;
    font-size: 1.6rem;
    line-height: 4rem;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    text-align: center;
    transition: 0.15s;
    color: #fff;
  }

  .btn_link-secondary {
    width: 100%;
  }

  .btn-secondary {
    background: #2f448e;
    color: #fff !important;
    width: 100%;
    padding: 0.5rem;
  }

  .author_sns {
    margin-bottom: 1rem !important;
  }
}

/* Grid Layout
--------------------------------------------- */
.container {
  max-width: 1100px;
  width: 100%;
}

/* Navigation
--------------------------------------------- */
.main-navigation,
.footer-navigation {
  display: block;
  width: 100%;
}

.main-navigation ul,
.footer-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul {
  position: absolute;
  width: 100%;
  background: #e8ededf2;
  padding: 75px 0 0 0;
  list-style: none;
  margin: 0;
  text-align: center;
  /*overflow-x: hidden;*/
  transition: 0.5s;
  transform: translate3d(100%, 0, 0);
}

.main-navigation ul ul,
.footer-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul,
.footer-navigation ul ul li:hover > ul,
.footer-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a,
.footer-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul,
.footer-navigation ul li:hover > ul,
.footer-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
  text-align: center;
  padding: 0 1.6rem;
  letter-spacing: 2px;
  font-size: 1.1rem;
  font-weight: bold;
}

.footer-navigation li {
  position: relative;
  text-align: center;
  padding: 0 1rem;
}

.main-navigation a {
  display: block;
  text-decoration: none;
  color: #333333;
}

.footer-navigation a {
  display: block;
  text-decoration: none;
  color: #ffffff;
}

/* Small menu. */
.menu-toggle {
  display: block;
  position: absolute;
  right: 0;
  background: #fff;
  border: none;
  top: 0;
  height: 55px;
  width: 55px;
  border-radius: 0;
  margin: 10px 10px 0 0;
  z-index: 100;
}

.main-navigation.toggled ul {
  display: block;
  background: rgba(255, 255, 255, 0.9);
  padding: 75px 0 0 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: all 0.3s ease-in-out;
}

.menu-item-description {
  display: block;
}

a.head-contact {
  display: none;
}

@media screen and (max-width: 991px) {
  .main-navigation li {
    padding: 0 1rem;
  }
}

@media screen and (max-width: 780px) {
  .site-header {
    /*background: rgb(0 0 0 / 50%);*/
    transition: all 0.5s ease-in-out;
    height: 75px;
    /*top: 0;*/
  }

  .home .site-header {
    /*background: transparent;*/
  }

  .site-header-container {
    padding: 0;
  }

  a.head-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    color: #fff;
    background: #303c73;
    right: 65px;
    width: 55px;
    height: 55px;
    margin: 10px 0 0 auto;
  }

  a.head-contact i {
    font-size: 2.5rem;
  }

  .site-branding {
    width: 100%;
    max-width: 200px;
    position: absolute;
    left: 10px;
    top: 23px;
  }

  .menu-toggle > span {
    position: absolute;
    left: 0;
    right: 0;
    width: 25px;
    height: 2px;
    background-color: #303c73;
    margin: 0 auto;
    border-radius: 2px;
    -webkit-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    z-index: 100;
  }

  .menu-toggle > span:nth-child(1) {
    top: 18px;
  }

  .menu-toggle > span:nth-child(2) {
    top: 26px;
  }

  .menu-toggle > span:nth-child(3) {
    top: 34px;
  }

  .toggled .menu-toggle > span:nth-child(1) {
    top: 26px;
    transform: rotate(45deg);
  }

  .toggled .menu-toggle > span:nth-child(2) {
    top: 26px;
    opacity: 0;
  }

  .toggled .menu-toggle > span:nth-child(3) {
    top: 26px;
    transform: rotate(135deg);
  }

  .main-navigation li {
    text-align: left;
    padding: 0;
  }

  .main-navigation ul li a {
    color: #333333;
    padding: 0.7rem 0 0.7rem 4rem;
  }

  .main-navigation ul li.menu-line {
    text-align: center;
    background: rgba(55, 199, 126, 0.9);
    margin-top: 3rem;
  }

  .main-navigation ul li.menu-line a {
    color: #ffffff;
  }

  .footer-container {
    display: none;
  }
}

@media screen and (min-width: 780px) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
    justify-content: flex-end;
    position: relative;
    background: none;
    width: auto;
    padding: 0;
    transform: translate3d(0, 0, 0);
  }

  .main-navigation ul li a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #333333;
    transition: transform 0.3s ease;
    transform: scale3d(0, 1, 0);
    transform-origin: right top;
  }

  .main-navigation ul li:hover a::after,
  header .main-navigation ul li a.active::after {
    transform-origin: left top;
    transform: scale3d(1, 1, 1);
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

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

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* Top Page
--------------------------------------------- */

.home section {
  margin-top: 8rem;
}

.home h1 {
  font-size: 1.4rem;
}

.home h2 {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  color: #28376b;
  border: solid 1px #191919;
  padding: 1.5rem;
}

.home h2 span {
  display: block;
  text-align: center;
  font-size: 1.4rem;
  font-weight: normal;
}

.hero {
  background-attachment: fixed;
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  color: #fff;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8%;
}

.hero img {
  max-width: 100%;
  width: 540px;
  border-radius: 0;
}

#service .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 20px;
}

#service .col-6 {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  max-width: 480px;
  width: 48%;
  margin-top: 6rem;
}

#service .thumbnail {
  width: 100%;
}

#service .thumbnail img {
  display: block;
  width: 100%;
  box-shadow: 0px 0px 83.3px 14.7px rgba(102, 102, 102, 0.1);
}

#service article h3 {
  color: #222222;
  font-weight: bold;
  font-size: 2rem;
  margin-top: 0;
  background: none;
  padding: 8px 0;
  border: none;
}

#service article h3 span {
  font-size: 1.4rem;
  color: #28376b;
}

#service article {
  background: #fff;
  padding: 10px 32px;
  box-sizing: border-box;
  box-shadow: 0px 0px 83.3px 14.7px rgba(102, 102, 102, 0.1);
}

#service article p {
  font-size: 1.4rem;
  line-height: 1.6;
}

.btn.main {
  display: inline-block;
  position: relative;
  margin-top: 2em;
  text-align: center;
  color: #ffffff;
  max-width: 310px;
  width: 100%;
  padding: 1.3em 2em;
  z-index: 2;
  transition: 0.2s 0.2s ease-out all;
  overflow: hidden;
  background: #db7993;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: 0px 4px 1px #dbdbdb;
}

.btn_info .btn.main {
  margin: 8px auto;
  padding: 0.6em 2em;
  display: inline-block;
  font-size: 88%;
}

.btn_info .icon-right.after::before {
  top: 0.6em;
}

.btn_info .icon-right::after {
  font-size: 1.1em;
  top: 1.1em;
}

#blog .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 4rem;
}

#blog article {
  display: flex;
  width: 32%;
  align-items: flex-start;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 12px;
}

#blog article .eyecatch {
  overflow: hidden;
  max-width: 120px;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

#blog article .eyecatch img {
  border-radius: 4px;
}

#blog article .entry-content {
  width: 100%;
  margin: 0 0 0 15px;
  flex: 1;
}

#blog article h3 {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
  margin: 8px auto;
}

#blog article h3 a {
  display: block;
  color: #191919;
  font-weight: bold;
  text-decoration: none;
}

#blog article .cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  background-color: #303c73;
  font-size: 1.1rem;
}

#blog article .cat a {
  display: inline-block;
  color: #ffffff;
  transition: 0.15s;
  text-decoration: none;
}

#blog article p {
  font-size: 1.3rem;
  line-height: 1.2;
}

#about .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 4rem;
}

#about .image {
  width: 60%;
  min-width: 60%;
  box-shadow: 0 0px 50px 0px rgba(10, 10, 10, 0.2);
}

#about .image img {
  display: block;
  width: 100%;
}

#about .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 40%;
  min-width: 40%;
  z-index: 1;
  background: rgba(255, 255, 255, 1);
  padding: 1em 2.6em;
  box-sizing: border-box;
  box-shadow: 0 0px 50px 0px rgba(10, 10, 10, 0.2);
}

#about h3 {
  text-align: left;
  width: 100%;
  font-weight: bold;
  font-size: 212.5%;
  line-height: 120%;
  letter-spacing: -0.02em;
  margin: 0;
  word-break: break-all;
  color: #28376b;
  padding-bottom: 4px;
}

#about h3 span {
  color: inherit;
  font-size: 1.4rem;
  font-weight: normal;
}

#about .intro {
  overflow: hidden;
  border-top: 1px solid #9a9a9a;
  margin-top: 1.2em;
  margin-bottom: 0em;
  padding-top: 1em;
}

@media screen and (max-width: 960px) {
  #blog article {
    width: 49%;
  }

  #about .image {
    order: 1;
    width: 100%;
    min-width: 100%;
  }

  #about .content {
    order: 2;
    width: 100%;
    min-width: 100%;
  }
}

@media screen and (max-width: 780px) {
  .hero {
    padding: 15%;
    background-size: auto;
    height: 50vh;
  }

  #blog article {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  #service .col-6 {
    max-width: none;
    width: 100%;
  }
}

/* index Page
--------------------------------------------- */
.site-main .row {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-main .row .left {
  width: 70%;
  padding-bottom: 10rem;
}

.site-main .row .right {
  width: 27%;
}

.blog .left h1,
.archive .left h1,
.search .left h1 {
  margin-bottom: 3rem;
  line-height: 1.5;
}

.blog .left article,
.archive .left article,
.search .left article {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.blog .left article .eyecatch,
.archive .left article .eyecatch,
.search .left article .eyecatch {
  position: relative;
  display: block;
  max-width: 300px;
  width: 100%;
  height: 170px;
  overflow: hidden;
}

.blog .left article .eyecatch img,
.archive .left article .eyecatch img,
.search .left article .eyecatch img {
  height: 100%;
  object-fit: cover;
  transition-duration: 0.3s;
}

.blog .left article .eyecatch a:hover img,
.archive .left article .eyecatch a:hover img,
.search .left article .eyecatch a:hover img {
  transform: scale(1.2);
}

.blog .left article .eyecatch span,
.archive .left article .eyecatch span,
.search .left article .eyecatch span {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: #303c73;
  max-width: calc(100% - 3rem);
}

.blog .left article .eyecatch span a,
.archive .left article .eyecatch span a,
.search .left article .eyecatch span a {
  display: block;
  padding: 7.5px 10px;
  color: #fff;
  font-size: 1rem;
  transition: 0.15s;
  line-height: 1.35;
  text-decoration: none;
}

.blog .left article .contents,
.archive .left article .contents,
.search .left article .contents {
  position: relative;
  max-width: 410px;
  width: 97%;
  margin-left: 3%;
}

.blog .left article ul.date,
.archive .left article ul.date,
.search .left article ul.date {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog .left article h2,
.archive .left article h2,
.search .left article h2 {
  font-size: 1.8rem;
  color: #191919;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.blog .left article h2 a,
.archive .left article h2 a,
.search .left article h2 a {
  font-size: 1.8rem;
  color: #191919;
  text-decoration: none;
}

.blog .left article p,
.archive .left article p,
.search .left article p {
  margin-bottom: 20px;
}

.paginavi {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 3rem;
}

.page-numbers {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  color: #303c73;
  background: #ffffff;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-left: -1px;
  padding: 10px;
}

a.page-numbers {
  color: #303c73;
  text-decoration: none;
}

.prev.page-numbers,
.next.page-numbers {
  width: auto;
}

.page-numbers.current {
  color: #ffffff;
  background: #303c73;
}

.sortby {
  display: flex;
  list-style: none;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
  padding-bottom: 20px;
}

.sortby_item {
  color: #3f3f3f;
  line-height: 2rem;
  margin-right: 10px;
}

.sortby_link {
  text-decoration: none;
  color: #191919;
  transition: 0.15s;
}

.sortby_link.current,
.sortby_link:hover {
  color: #191919;
  font-weight: 700;
  border-bottom: 2px solid;
  padding-bottom: 3px;
}

@media screen and (max-width: 780px) {
  .site-main .row .left {
    width: 100%;
  }

  .left article {
    padding: 10px;
  }

  .left article h2 a {
    font-size: 1.5rem;
  }

  .btn-primary {
    padding: 0.5rem 1rem;
  }

  .blog.left article p {
    display: none;
  }

  .site-main .row .right {
    width: 100%;
  }
}

/* Archive Page
--------------------------------------------- */
.archive_title h1 {
  border-bottom: 1px dotted #d8d8d8;
  padding-bottom: 5px;
  margin-bottom: 60px;
}

.archive_sub {
  font-size: 1rem;
  display: block;
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.5);
}

/* Single Page
--------------------------------------------- */
.entry-title {
  margin-bottom: 2rem;
}

.entry-meta {
  font-size: 1.2rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.icon-clock::before {
  font-family: icomoon;
  content: "\e94e";
  font-size: 1rem;
}

.single article,
.page article {
  padding: 2rem;
}

.single article h1,
.page article h1 {
  color: #303c73;
  line-height: 1.5;
  margin-bottom: 3rem;
  border-bottom: solid #303c73 1px;
}

.single article,
.page article {
  display: block;
  border: none;
  padding: 0;
}

.single article .eyecatch,
.page article .eyecatch {
  position: relative;
  display: block;
  max-width: 300px;
  width: 100%;
}

.single article .eyecatch span,
.page article .eyecatch span {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: #303c73;
  max-width: calc(100% - 3rem);
}

.single article .eyecatch span a,
.page article .eyecatch span a {
  display: block;
  padding: 7.5px 10px;
  color: #fff;
  font-size: 1rem;
  transition: 0.15s;
  line-height: 1.35;
  text-decoration: none;
}

.single article .contents,
.page article .contents {
  position: relative;
  max-width: 410px;
  width: 97%;
  margin-left: 3%;
}

.single article ul.date,
.page article ul.date {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.single article h2,
.page article h2 {
  color: #ffffff;
  font-size: 2.8rem;
  line-height: 1.5;
  background: #303c73;
  margin-top: 4rem;
  padding: 10px;
}

.single article h3,
.page article h3 {
  color: #303c73;
  font-size: 2.1rem;
  line-height: 1.5;
  padding: 8px 0 8px 2px;
  background-color: #ffffff;
  border-radius: inherit;
  margin-top: 2rem;
  border-top: solid 1px #303c73;
  border-bottom: solid #303c73 1px;
}

.single article h4,
.page article h4 {
  font-size: 1.6rem;
  line-height: 1.5;
  margin-top: 2rem;
  color: #333333;
}

.single article h5,
.single article h6 {
  color: #333333;
  line-height: 1.5;
  margin-top: 2rem;
  font-size: 1.2rem;
}

.single article p,
.page article p {
  margin-top: 20px;
}

.single article div p:first-child,
.page article div p:first-child {
  margin-top: 0;
}

.single article ul,
.single article ol,
.page article ul,
.page article ol {
  margin-left: 0;
  margin-bottom: 3rem;
}

.single article ol,
.page article ol {
  counter-reset: number;
}

.single article ol li,
.page article ol li {
  position: relative;
  list-style: none;
  line-height: 1.5;
  margin-top: 1rem;
  padding-left: 2.2rem;
}

.single article ol > li:before,
.page article ol > li:before {
  counter-increment: number;
  content: counter(number);
  line-height: 2.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  width: 1.4rem;
}

.single article ul li,
.page article ul li {
  position: relative;
  list-style: none;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-top: 1rem;
  padding-left: 2.2rem;
  font-weight: 600;
}

.single article ol > li:before,
.single article ul > li:before,
.page article ol > li:before,
.page article ul > li:before {
  display: block;
  position: absolute;
  left: 0;
  color: #dd9b9b;
  font-weight: 600;
}

.single article ul > li::before,
.page article ul > li::before {
  color: #dd9b9b;
}

.single article ul > li:before,
.page article ul > li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-weight: 900;
  transform: scale(0.6);
}

.toc_list li:before {
  content: none !important;
}

.image-border {
  border: solid 2px #d5d5d5;
}

@media screen and (max-width: 780px) {
  .site-main {
    padding-top: 10rem;
  }

  .single .left,
  .page .left {
    padding: 0;
    padding-bottom: 0;
  }

  .single .left h1,
  .page .left h1 {
    font-size: 1.8rem;
  }

  .site-main .row .left {
    padding-bottom: 0;
  }

  .align-default .alignright {
    float: none;
  }

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