/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 1.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

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

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	0. 	CSS Reset
	1. 	Document Setup
	2. 	Element Base
	3. 	Helper Classes
	4. 	Site Header
	5. 	Menu Modal
	6. 	Search Modal
	7. 	Page Templates
		a. 	Template: Cover Template
		c. 	Template: Full Width
	8.  Post: Archive
	9.  Post: Single
	10. Blocks
	11. Entry Content
	12. Comments
	13. Site Pagination
	14. Error 404
	15. Widgets
	16. Site Footer
	17. Media Queries

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


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

/*	0. CSS Reset
/* -------------------------------------------------------------------------- */

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


html,
body {
    border: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
    border: none;
    font-size: 16px;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
}

blockquote::before,
blockquote::after {
    content: "";
}

/*!
 * ress.css • v3.0.1
 * MIT License
 * github.com/filipelinhares/ress
 */

/* # =================================================================
   # Global selectors
   # ================================================================= */

html {
    box-sizing: border-box;
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4;

    -webkit-text-size-adjust: 100%;
    /* Prevent adjustments of font size after orientation changes in iOS */
}

*,
::before,
::after {
    box-sizing: inherit;
    background-repeat: no-repeat;
    /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
}

::before,
::after {
    vertical-align: inherit;
    text-decoration: inherit;
    /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
}

* {
    margin: 0;
    padding: 0;
    /* Reset `padding` and `margin` of all elements */
}

/* # =================================================================
   # General elements
   # ================================================================= */

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

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

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

small {
    font-size: 80%;
    /* Set font-size to 80% in `small` elements */
}

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

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

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

a:active,
a:hover {
    outline-width: 0;
    /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    /* Specify the font family of code elements */
}

pre {
    font-size: 1em;
    /* Correct the odd `em` font sizing in all browsers */
}

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

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -.25em;
}

sup {
    top: -.5em;
}

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

input {
    border-radius: 0;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
    cursor: default;
}

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

[type="search"] {
    outline-offset: -2px;
    /* Correct the outline style in Safari */

    -webkit-appearance: textfield;
    /* Correct the odd appearance in Chrome and Safari */
}

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

textarea {
    overflow: auto;
    /* Internet Explorer 11+ */
    resize: vertical;
    /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
    font: inherit;
    /* Specify font inheritance of form elements */
}

optgroup {
    font-weight: bold;
    /* Restore the font weight unset by the previous rule */
}

button {
    overflow: visible;
    /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
    text-transform: none;
    /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
    cursor: pointer;
    color: inherit;
}

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

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    outline: 1px dotted ButtonText;
}

button,
html [type="button"],
/* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    /* Correct the inability to style clickable types in iOS */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
    border-style: none;
    background-color: transparent;
}

/* Style select like a standard input */
select {
    -webkit-appearance: none;
    /* Chrome 41+ */
    -moz-appearance: none;
    /* Firefox 36+ */
}

select::-ms-expand {
    display: none;
    /* Internet Explorer 11+ */
}

select::-ms-value {
    color: currentColor;
    /* Internet Explorer 11+ */
}

legend {
    display: table;
    /* Correct the text wrapping in Edge and IE */
    max-width: 100%;
    /* Correct the text wrapping in Edge and IE */
    max-width: 100%;
    /* Correct the text wrapping in Edge 18- and IE */
    white-space: normal;
    /* Correct the text wrapping in Edge and IE */
    color: inherit;
    /* Correct the color inheritance from `fieldset` elements in IE */
    border: 0;
    /* Correct `color` not being inherited in IE 8/9/10/11 */
}

::-webkit-file-upload-button {
    font: inherit;
    /* Change font properties to `inherit` in Chrome and Safari */
    color: inherit;
    /* Correct the inability to style clickable types in iOS and Safari */

    -webkit-appearance: button;
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */

img {
    border-style: none;
    /* Remove border when inside `a` element in IE 8/9/10 */
}

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

/* # =================================================================
   # Accessibility
   # ================================================================= */

/* Hide content from screens but not screenreaders */


/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
    cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
    cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
    cursor: default;
}


body {
    font-family: "Montserrat", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .8px;
    color: #333;
}

a {
    transition: opacity .3s;
    text-decoration: none;
    color: #1ca9e3;
}

img {
/*    max-width: 100%;*/
    max-width: 100vw;
    height: auto;
    vertical-align: bottom;
    border-style: none;
}

ul,
li {
    list-style: none;
}

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

/*--------------------------------
 レイアウト
---------------------------------*/
.wrapper {
    padding-top: 73px;
}

.section {
    padding: 90px 0;
}

.section:nth-of-type(odd) {
    background-color: #f7f7f7;
}

.inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 40px;
}

/*--------------------------------
 見出し
---------------------------------*/
.title {
    font-size: 34px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: .05em;
    color: #333;
}

.lead {
    margin-bottom: 30px;
}

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100vw;
    background-color: #fff;
    box-shadow: 0 5px 10px -6px rgba(0, 0, 0, .1);
}

.header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
}

.header-logo {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    margin-right: 20px;
    letter-spacing: .05em;
}

.header-logo a {
    color: #333;
}

.header-nav-list {
    display: flex;
    justify-content: space-between;
}

.header-nav-item:not(:last-child) {
    margin-right: 20px;
}

.header-nav-item a {
    position: relative;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
    padding: 5px 0;
    transition: .3s;
    letter-spacing: .05em;
    color: #333;
}

.header-nav-item a:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    content: "";
    transition: .3s;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #333;
}

.header-nav-item a:hover {
	text-decoration: none;
}

.header-nav-item a:hover:after {
    width: 100%;
}

/*--------------------------------
 メインビジュアル
---------------------------------*/
.main-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 85vh;
    text-align: center;
}

.main-visual-inner {
    padding: 0 40px;
}

.main-visual-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
/*     margin-bottom: 5px; */
	margin-bottom: 15px;
    letter-spacing: .1em;
}

/*jsで生成されるspanタグ*/
.main-visual-title span{
    display: none;
}

/*|カーソルを表示*/
.main-visual-title:after {
/*   content: "|"; */
  content: "";
  animation: typingCursor .8s ease infinite;
}

@keyframes typingCursor {
  from　{
    opacity:0;
  }
  to{
    opacity:1
  }
}

.main-visual-subtitle {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 40px;
    letter-spacing: .08em;
}


/* 共通_フェードイン効果 */
.fadeinElem {
    transition: all 400ms ease-out;
}
.fadeinElem.toUp {
    transform: translateY( 15px );
    opacity: 0;
}
.fadeinElem.toLeft {
    transform: translateX( 15px );
    opacity: 0;
}
.fadeinElem.toRight {
    transform: translateX( -15px );
    opacity: 0;
}
.fadeinElem.show {
    transform: translate( 0 );
    opacity: 1;
}

/*--------------------------------
 Works
---------------------------------*/
.works-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -40px;
}

.works-list-div {
	margin-right: 20px;
}

@media screen and (max-width: 940px) {
	.works-list-div {
		width: 100%;
		margin-right: 0px;
}
}

.works-item {
    width: 31.74603%;
    margin-right: 1.58730%;
    margin-bottom: 40px;
    color: #333;
}

.works-item:hover {
    opacity: .9;
}

.works-item:nth-of-type(3n) {
    margin-right: 0;
}

/* .works-img img {
    border: 1px solid #e6e6e6;
    max-width: 100%;
} */

.works-img {
	opacity: 1;
/*     background-color: #FF0000; */
}

.works-img:hover {
	opacity: 0.5;
}
	
@media screen and (max-width: 940px) {
.works-img {
	width: 100%;
	}
	}

.works-name {
/*     font-size: 12px; */
	font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
}

.works-info {
/*     font-size: 10px; */
	font-size: 11px;
}

.works-point {
	margin-bottom: 20px;
/* 	margin-top: 5px; */
	margin-top: 1px;
	font-size: 13px;
    font-weight: bold;
}

.works-point a:hover {
	color: #FF8080;
}


/* モーダル全体(背景＋本体) */
.modal{
  display: none;
  position: fixed;
/*   top: 0;
  height: 100vh;
  width: 100%; */

top: 0;
    left: 0;
    height: 100%;
    width: 100%;
/*     background: #000;
    opacity: 0.7; */
    z-index: 9999;
}

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
/* height: 50%;
  width: 50%; */
  background: rgba(0, 0, 0, 0.8);
	opacity: 0.7;
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
/*   height: 60%; */
/* 	height: 80%; */
	height: 50%;
	
/*   width: 60%; */
    width: 95%;
    max-width: 800px;
    background: white;
    opacity: 1 !important;
/*     padding: 40px; */
	padding: 20px 40px;
    z-index: 10000;
}

.modal-content_h2 {
	background-color: #EAEAEA;
	padding: 1px 5px;
	font-size: 17px;
}

.modal-content_p {
	padding: 5px;
}



/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

/* モーダル内閉じるボタン */
.modal-xmark {
	padding: 3px 15px;
    border: 1px solid #FF8080;
    border-radius: 10px;
    margin: 5px auto;
    display: inline-block;
    z-index: 9999;
    /* position: absolute; */
    cursor: pointer;
    width: 100px;
    /* left: 344px; */
    text-align: center;
	
	color: #FFFFFF;
    background-color: #FF8080;
}


.modal-xmark:visited {
	color: #FFFFFF;
}

.modal-xmark:hover {
	color: #FF8080 !important;
    background-color: #FFF;
	text-decoration: none;
}



/*--------------------------------
 Skill
---------------------------------*/
.skill-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: -50px;
}

.skill-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 48%;
    margin-bottom: 50px;
}

.skill-img {
    width: 60px;
    height: auto;
    margin-right: 20px;
}



.skill-img__img__html {
    width: 47px;
    height: 66.27px;
    margin-left: 6px;
    margin-right: 10px; 
    margin-top: -1.5px; 
    max-width: 100%;
}


@media screen and (max-width: 768px) {
    .skill-img__img__html {
        margin-top: 8px;
    }
}




.skill-img__img__css {
    width: 47px;
    height: 66.27px;
    margin-left:6px;
    margin-right: 10px; 
    margin-top: -2px; 
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .skill-img__img__css {
        margin-top: 8px;
    }
}


.skill-img__img__js {
    width: 47px;
    height: 47px;
    margin-left:6px;
    margin-right: 10px; 

/*     margin-top: -2px;  */
    margin-top: 7px;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .skill-img__img__js {
        margin-top: 8px;
    }
}


.skill-img__img__jQuery {
    width: 95px;
    height: 95px;
    margin-left: -17px;
    margin-right: 0;
    margin-top: -22px; 
/* 	margin-top: -26px;  */
/*     max-width: 100%; */
}

@media screen and (max-width: 768px) {
    .skill-img__img__jQuery {
/*         margin-top: 8px; */
    }
}



.skill-img__img__wp { 
    width: 60px;
    height: 60px;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .skill-img__img__wp {
        margin-top: 8px;
    }
}



.skill-img__img__premiere {
    width: 60px;
    height: 58.45px;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .skill-img__img__premiere {
        margin-top: 8px;
    }
}


.skill-img__img__Photoshop {
    width: 60px;
    height: 58.45px;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .skill-img__img__Photoshop {
        margin-top: 8px;
    }
}


.skill-img__img__language { 
    width: 60px;
    height: 60px;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .skill-img__img__language {
        margin-top: 1px;
    }
}




.skill-body {
    flex: 1;
}

.skill-name {
    margin-bottom: 3px;
}

/*--------------------------------
 About
---------------------------------*/
.profile {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

.profile-img {
    width: 20%;
    margin-right: 30px;
    border-radius: 50%;
}

.profile-img img {
    border-radius: 50%;
}

.profile-img img:hover {
	transition: .3s;
	transform: scale(1.05);	
}

.profile-body {
    flex: 1;
}

.profile-body p:not(:last-child) {
    margin-bottom: 30px;
}

/*--------------------------------
 Contact
---------------------------------*/
.contact {
    text-align: center;
}

.contact p {}

/*
.contact-item:not(:last-child) {
  margin-right: 10px;
}
*/

.contact-list {
/* 	font-family: 'Kosugi Maru', sans-serif; */
/* 	font-family: 'Noto Sans JP', sans-serif; */
	color: #FFF;
    font-weight: bold;
}

.contact-list a {
	color: #FFF;
	text-decoration: none;
	display: inline-block;
}
.contact-list a:hover {
/* 	color: #FFF; */
/* 	color: #CCCCCC; */
	color: #FFFFA6;
/* 	text-decoration: none;
	transition: .3s;
    transform: scale(1.05); */
}

.contact-item_img {
    margin: 0 10px;
/* 	margin-right: 5px; */
}

.contact-item_img:hover {
	opacity: 0.5;
}


.contact-item_mail {
	background: #DB4437;
	padding: 10px;
/* 	padding-left: 3px; */
    padding-left: 5px;
	margin-bottom: 10px;
    border-radius: 20px;
    display: inline-block;
	display: inline-block;
	text-align: left;
    vertical-align: middle;
    line-height: 33px;
	width: 290px;
}

.contact-item_FB {
	background: #1877f2;
	padding: 10px;
/* 	padding-left: 3px; */
    padding-left: 5px;
	margin-bottom: 10px;
    border-radius: 20px;
    display: inline-block;
	text-align: left;
    vertical-align: middle;
    line-height: 41px;
	width: 290px;
}

.contact-item_Tw {
	background: #1DA1F2;
	padding: 10px;
/* 	padding-left: 3px; */
    padding-left: 5px;
    border-radius: 20px;
    display: inline-block;
	text-align: left;
    vertical-align: middle;
    line-height: 33px;
	width: 290px;
}

.contact-text {
    margin-top: 10px;
}

/*--------------------------------
 ページトップ
---------------------------------*/
.page-top {
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    background-color: #4c4c4c;
}

.page-top .material-icons-outlined {
    vertical-align: bottom;
    color: #fff;
}

/*--------------------------------
 フッター
---------------------------------*/
.footer {
    padding: 30px;
    background-color: #333;
    
/*    position: fixed;*/
/*    position: absolute;*/
    bottom: 0;
    width: 100vw;
}

.copyright {
    font-size: 10px;
    text-align: center;
    color: #797979;
}

/*--------------------------------
 下層：Worksページ
---------------------------------*/
.article {
    padding: 80px 0;
}

.article-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

.article-title {
    margin-bottom: 30px;
    text-align: center;
}

.article-img {
    margin-bottom: 20px;
}

.article-body {
    max-width: 720px;
    margin: 0 auto;
    margin-bottom: 80px;
}

.article-info-title {
    font-size: 15px;
}

.article-body img {
    margin-bottom: 30px;
}

.article-body p {
    margin-bottom: 30px;
}

.home-link {
    text-align: center;
}

/*media Queries 767
----------------------------------------------------*/
@media screen and (max-width: 767px) {
    body {
        font-size: 13px;
        line-height: 1.7;
    }

    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    /* 見出し */
    .title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    /* レイアウト */
    .wrapper {
        padding-top: 57px;
    }

    .section {
        padding: 60px 0;
    }

    .inner {
        padding: 0 20px;
    }

    /* ヘッダー */
    .header .inner {
        padding: 15px;
    }

    .header-logo {
        font-size: 15px;
        margin-right: 15px;
    }

    .header-nav-item:not(:last-child) {
        margin-right: 10px;
    }

    .header-nav-item a {
        font-size: 10px;
    }

    .header-nav-item a:after {
        display: none;
    }

    /*  メインビジュアル */
    .main-visual {
        height: 75vh;
    }

    .main-visual-inner {
        padding: 0 20px;
    }

    .main-visual-title {
        font-size: 30px;
    }

    .main-visual-subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }

    /* Works */
/*     .works-name {
        font-size: 10px;
    } */

    .works-list {
        justify-content: space-between;
    }

    .works-item {
        flex: 0 0 48%;
        margin-right: 0;
        margin-bottom: 30px;
    }

    /* Skill */
    .skill-list {
        display: block;
        margin-bottom: 0;
    }

    .skill-item {
        width: 100%;
        margin-bottom: 35px;
    }

    .skill-item:last-child {
        margin-bottom: 0;
    }

    /* About */
    .profile {
        display: block;
    }

    .profile-img {
        width: 150px;
        margin: 0 auto;
        margin-bottom: 25px;
    }

    .profile-body p:not(:last-child) {
        margin-bottom: 20px;
    }

    /* フッター */
    .footer {
        padding: 20px;
    }

    /* 下層ページ */
    .article {
        padding: 50px 0;
    }
}



/*--------------------------------
 以下、企業サイト(架空サイト)用
---------------------------------*/
/* # =================================================================
     # Accessibility
     # ================================================================= */
/* Hide content from screens but not screenreaders */


/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
    cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
    cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
    cursor: default;
}

html {
    font-size: 100%;
}

body {
    font-family: "Montserrat", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.8;
    color: #333;
    font-size: 15px;
    font-size: 0.9375rem;
    
    overflow-x: hidden;
/*	min-width: 60rem;*/
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
        font-size: 0.875rem;
    }
}

a {
    transition: .3s;
    text-decoration: none;
    color: #391e88;
}

a:hover {
    text-decoration: underline;
}

img {
/*    max-width: 100%;*/
    max-width: 100vw;
    vertical-align: bottom;
}

::selection {
    color: #fff;
    background-color: #391e88;
}

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

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.heading-primary {
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #23E86B;
    font-size: 36px;
    font-size: 2.25rem;
}




@media screen and (max-width: 768px) {
    .heading-primary {
        font-size: 30px;
        font-size: 1.875rem;
    }
}

.heading-primary--white {
    color: #fff;
}

.heading-primary__sub {
    display: block;
    margin-top: 5px;
    letter-spacing: .02em;
    font-size: 13px;
    font-size: 0.8125rem;
}

.heading-secondary {
    font-weight: bold;
    line-height: 1;
    color: #391e88;
    font-size: 32px;
    font-size: 2rem;
}

@media screen and (max-width: 768px) {
    .heading-secondary {
        font-size: 24px;
        font-size: 1.5rem;
    }
}

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

.u-text-bold {
    font-weight: bold !important;
}

.u-text-big {
    font-size: 1.5em;
}

.u-sp-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .u-sp-only {
        display: block;
    }
}

.l-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

.l-inner--xs {
    max-width: 780px;
}

.l-inner--sm {
    max-width: 950px;
}

.l-inner--xl {
    max-width: 1300px;
}

.l-section {
    padding: 70px 0;
}

@media screen and (max-width: 768px) {
    .l-section {
        padding: 40px 0;
    }
}

@media screen and (max-width: 768px) {
    .header {
        padding: 10px 15px;
    }
}

.header.active {
    padding: 20px 30px;
    background-color: #21054d;
}

@media screen and (max-width: 768px) {
    .header.active {
        padding: 10px 15px;
    }
}

@media screen and (max-width: 768px) {
    .header__logo {
        width: 120px;
    }
}


.footer-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
}

@media screen and (max-width: 768px) {
    .footer-nav__list {
        justify-content: flex-start;
        margin-bottom: -10px;
    }
}

.footer-nav__item {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #e9e1d1;
    font-size: 12px;
    font-size: 0.75rem;
}

@media screen and (max-width: 768px) {
    .footer-nav__item {
        margin-bottom: 10px;
    }
}

.footer-nav__item:not(:last-child) {
    margin-right: 10px;
}

.footer-nav__link {
    line-height: 1;
    padding: 5px;
    color: #fff;
}

.footer-nav__link:hover {
    text-decoration: none;
    opacity: .8;
}


.copyright__link {
    text-decoration: none;
    color: #a798b7;
}

.copyright__link:hover {
    text-decoration: none;
    opacity: .8;
}

.logo {
    line-height: 1;
}

.logo__img {
    display: block;
}

@media screen and (max-width: 768px) {
    .global-nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        display: flex;
        visibility: hidden;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        transition: opacity .3s ease;
        opacity: 0;
        background-image: linear-gradient(135deg, #7633a4, #250d65);
    }

    .global-nav.show {
        visibility: visible;
        opacity: 1;
    }
}

.global-nav__list {
    display: flex;
    padding-left: 30px;
    list-style: none;
}

@media screen and (max-width: 768px) {
    .global-nav__list {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        padding: 0;
    }
}

.global-nav__item {
    font-weight: bold;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 14px;
    font-size: 0.875rem;
}

@media screen and (max-width: 960px) {
    .global-nav__item {
        font-size: 12px;
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 768px) {
    .global-nav__item {
        margin-bottom: 20px;
        font-size: 16px;
        font-size: 1rem;
    }
}

.global-nav__item:not(:last-child) {
    margin-right: 25px;
}

@media screen and (max-width: 768px) {
    .global-nav__item:not(:last-child) {
        margin-right: 0;
    }
}

.global-nav__link {
    position: relative;
    display: inline-block;
    color: #fff;
}

.global-nav__link::after {
    position: absolute;
    bottom: -5px;
    left: 0;
    display: block;
    width: 0;
    height: 1px;
    content: "";
    transition: width .3s;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .global-nav__link::after {
        display: none;
    }
}

.global-nav__link:hover {
    text-decoration: none;
}

.global-nav__link:hover::after {
    width: 100%;
}

.btn-menu {
    display: none;
}

@media screen and (max-width: 768px) {
    .btn-menu {
        position: relative;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 5px;
        cursor: pointer;
        text-align: center;
        opacity: .9;
        border: none;
        outline: none;
        background: none;
        -webkit-appearance: none;
        appearance: none;
        font-size: 12px;
        font-size: 0.75rem;
    }
}

.btn-menu__line {
    position: relative;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    transition: all .4s;
    border-radius: 4px;
    background-color: #fff;
}

.btn-menu__line::before,
.btn-menu__line::after {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    transition: inherit;
    border-radius: 4px;
    background-color: inherit;
}

.btn-menu__line::before {
    top: -8px;
}

.btn-menu__line::after {
    top: 8px;
}

.btn-menu.active .btn-menu__line {
    background-color: transparent;
}

.btn-menu.active .btn-menu__line::before,
.btn-menu.active .btn-menu__line::after {
    top: 0;
    background-color: #fff;
}

.btn-menu.active .btn-menu__line::before {
    transform: rotate(45deg);
}

.btn-menu.active .btn-menu__line::after {
    transform: rotate(-45deg);
}

.breadcrumb {
    padding: 8px 0;
    list-style: none;
    background-color: #f0f0f0;
}

@media screen and (max-width: 768px) {
    .breadcrumb {
        padding: 5px 0;
    }
}

.breadcrumb__list {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.breadcrumb__item {
    display: inline;
    list-style: none;
    text-transform: uppercase;
    font-size: 12px;
    font-size: 0.75rem;
}

@media screen and (max-width: 768px) {
    .breadcrumb__item {
        font-size: 11px;
        font-size: 0.6875rem;
    }
}

.breadcrumb__item::after {
    padding: 0 .5em;
    content: ">";
    color: #555;
}

.breadcrumb__item:last-child:after {
    content: "";
}

.page-top {
    position: fixed;
    right: 45px;
    bottom: 45px;
    z-index: 1;
    display: none;
}

@media screen and (max-width: 768px) {
    .page-top {
        right: 20px;
        bottom: 20px;
    }
}

.page-top__link {
    display: block;
    width: 50px;
    height: 50px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border-radius: 50%;
    background-color: #391e88;
}

.page-top__link:hover {
    opacity: .8;
}

.btn {
    position: relative;
    font-weight: bold;
    line-height: 1.4;
    display: inline-block;
    width: 200px;
    padding: 20px 0;
    transition: .3s;
    text-align: center;
    text-decoration: none;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 50px;
    background-image: linear-gradient(-60deg, #16a085 0%, #23E86B 100%);
    /*    background-image: linear-gradient(to right, #7633a4 0%, #250d65 51%, #7633a4 100%);*/
    background-size: 200% auto;
    font-size: 14px;
    font-size: 0.875rem;
}

.btn::after {
    position: absolute;
    top: 50%;
    right: 1.5em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    transition: .3s;
    transform: translateY(-50%);
    font-size: 14px;
    font-size: 0.875rem;
}

.btn:hover {
    text-decoration: none;
    background-position: right center;
}

.btn:hover::after {
    right: 1.2em;
}

@media screen and (max-width: 768px) {
    .btn:hover::after {
        right: 1.5em;
    }
}

.btn--block {
    display: block;
    max-width: 300px;
    margin: 0 auto;
}

.btn--center {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.btn--transparent {
    border: 1px solid #0946E0;
    background: none;
}

.btn--transparent:hover {
    opacity: .8;
}

.btn-grad {
    background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%);
}

.btn-grad {
    display: block;
    margin: 10px;
    padding: 15px 45px;
    transition: .5s;
    text-align: center;
    text-transform: uppercase;
    color: white;
    border-radius: 10px;
    background-size: 200% auto;
    box-shadow: 0 0 20px #eee;
}

.btn-grad:hover {
    text-decoration: none;
    color: #fff;
    background-position: right center;
    /* change the direction of the change here */
}

.card__body {
    display: flex;
    flex-direction: column;
}

.card__img-wrapper {
    margin-bottom: 15px;
  
}

.card__img {
    width: 100%;
    height: auto;
}

.card__body {
    color: #333;
}

.card__title {
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 15px;
    text-align: center;
    font-size: 18px;
    font-size: 1.125rem;
}

@media screen and (max-width: 768px) {
    .card__title {
        margin-bottom: 10px;
    }
}

.card__caption {
    text-align: center;
    font-size: 16px;
    font-size: 1rem;
}

.card-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -30px;
}

@media screen and (max-width: 768px) {
    .card-wrapper {
        display: block;
        margin-bottom: 0;
    }
}

.card-wrapper .card {
/*    margin-bottom: 30px;*/
}

.card-wrapper--col2 {
    justify-content: space-between;
}

.card-wrapper--col2 .card {
    flex: 0 0 48%;
}

@media screen and (max-width: 768px) {
    .card-wrapper--col2 .card {
        margin-bottom: 30px;
    }
}

.card-wrapper--col3 .card {
    flex: 0 1 31.53153%;
    margin-right: 30px;
}

@media screen and (max-width: 768px) {
    .card-wrapper--col3 .card {
        margin-right: 0;
        margin-bottom: 40px;
    }
}

.card-wrapper--col3 .card:nth-child(3n) {
    margin-right: 0;
}

.card-wrapper--col3 .card:last-child {
    margin-bottom: 0;
}

.media {
    display: flex;
}

@media screen and (max-width: 768px) {
    .media {
        display: block;
    }
}

.media__img-wrapper {
    flex: 0 0 40.09009%;
    margin-right: 50px;
}

@media screen and (max-width: 768px) {
    .media__img-wrapper {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

.media__img {
    width: 100%;
    height: auto;
}

.media__body {
    flex: 1;
}

.media__title {
    margin-bottom: 20px;
    font-size: 24px;
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
    .media__title {
        line-height: 1.2;
        margin-bottom: 15px;
        text-align: center;
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.post-pager {
    margin-bottom: 20px;
}

.post-pager__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 1px solid #b8aed5;
    border-bottom: 1px solid #b8aed5;
}

.post-pager__item {
    flex: 0 0 50%;
    margin: 15px 0;
}

.post-pager__item:not(:last-child) {
    border-right: 1px solid #b8aed5;
}

.post-pager__item--prev .post-pager__link {
    padding: 10px 20px 10px 40px;
}

.post-pager__item--prev .post-pager__link::before {
    left: 10px;
    content: "\f0d9";
}

.post-pager__item--next .post-pager__link {
    padding: 10px 40px 10px 20px;
}

.post-pager__item--next .post-pager__link::before {
    right: 10px;
    content: "\f0da";
}

.post-pager__link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 10px 20px;
    text-decoration: none;
    color: #391e88;
    font-size: 14px;
    font-size: 0.875rem;
}

@media screen and (max-width: 768px) {
    .post-pager__link {
        font-size: 12px;
        font-size: 0.75rem;
    }
}

.post-pager__link:hover {
    text-decoration: none;
    background-color: #f9f7ff;
}

.post-pager__link::before {
    position: absolute;
    top: 50%;
    font-family: "Font Awesome 5 Free";
    font-size: 1.4rem;
    font-weight: 900;
    display: block;
    transform: translateY(-50%);
    color: #391e88;
}

.post-pager__home {
    text-align: center;
    text-transform: uppercase;
}

.pagination {
    display: flex;
    justify-content: center;
}

.pagination__page {
    font-weight: bold;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #f1ebf8;
    font-size: 20px;
    font-size: 1.25rem;
}

.pagination__link {
    color: #fff;
    background-image: linear-gradient(135deg, #7633a4, #250d65);
}

.pagination__link:hover {
    text-decoration: none;
    opacity: .9;
}

.table01 {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.table01 tr {
    border-bottom: solid 1px #ddd;
}

.table01 th,
.table01 td {
    padding: 30px 10px;
    text-align: left;
}

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

    .table01 th,
    .table01 td {
        display: block;
        padding: 0;
    }
}

.table01 th {
    width: 20%;
}

@media screen and (max-width: 768px) {
    .table01 th {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 768px) {
    .table01 td {
        margin-bottom: 20px;
    }
}

.table01 p:not(:last-child) {
    margin-bottom: 10px;
}

.table01 ul {
    margin-left: 20px;
}

.form__item:not(:last-child) {
    margin-bottom: 30px;
}

.form__title {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.form__note {
    font-weight: normal;
    margin-left: 5px;
    font-size: 12px;
    font-size: 0.75rem;
}

.form__require {
    margin-left: 10px;
    color: #391e88;
    font-size: 12px;
    font-size: 0.75rem;
}

@media screen and (max-width: 768px) {
    .form__radio {
        display: block;
    }
}

.form__radio:not(:last-child) {
    margin-right: 35px;
}

@media screen and (max-width: 768px) {
    .form__radio:not(:last-child) {
        margin-right: 0;
        margin-bottom: 5px;
    }
}

.form input[type="radio"] {
    margin-right: 5px;
    border: 1px solid #333;
    border-radius: 50%;
}

.form__input,
.form__select {
    width: 300px;
    padding: 8px;
    border: solid 1px #aaa;
    border-radius: 5px;
    background-color: #fff;
}

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

    .form__input,
    .form__select {
        width: 100%;
    }
}

.form input[type="tel"] {
    width: 200px;
}

@media screen and (max-width: 768px) {
    .form input[type="tel"] {
        width: 100%;
    }
}

.form__textarea {
    min-width: 600px;
    min-height: 200px;
    padding: 8px;
    resize: both;
    border: solid 1px #aaa;
    border-radius: 5px;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .form__textarea {
        width: 100%;
        min-width: 100%;
    }
}

.form__btn {
    margin-top: 50px;
    text-align: center;
}

.label-category {
    font-weight: bold;
    display: block;
    width: 80px;
    padding: 2px 10px;
    text-align: center;
    color: #333;
    border-radius: 20px;
    background-color: #e8e8e8;
    font-size: 12px;
    font-size: 0.75rem;
}

@media screen and (max-width: 768px) {
    .label-category {
        padding: 2px 8px;
        font-size: 11px;
        font-size: 0.6875rem;
    }
}

.contact {
/*    margin-top: 40px;*/
    padding: 80px 0;
    text-align: center;
    background-color: #f0f0f0;
}

@media screen and (max-width: 768px) {
    .contact {
        padding: 60px 0;
    }
}

.contact__heading {
    margin-bottom: 30px;
}

.contact__body {
    margin-bottom: 20px;
}

.news-list__list {
    list-style: none;
}

.news-list__item {
    display: flex;
}

@media screen and (max-width: 768px) {
    .news-list__item {
        display: block;
    }
}

.news-list__item:not(:last-child) {
    margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    .news-list__item:not(:last-child) {
        margin-bottom: 30px;
    }
}

.news-list__heading {
    display: flex;
}

@media screen and (max-width: 768px) {
    .news-list__heading {
        margin-bottom: 3px;
    }
}

.news-list__body {
    flex: 1;
}

.news-list__link {
    color: #333;
}

.news-list__date {
    margin-right: 20px;
}

.news-list__label {
    margin-right: 20px;
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-image: url(/wp-content/uploads/2021/03/pexels-jeshootscom-442576.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.hero__inner {
    padding: 0 40px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .hero__inner {
        text-align: left;
    }
}

hero__heading {
    background: #0000FF;
    padding: 20px;
}

.hero__title {
    position: relative;
    font-weight: bold;
    line-height: 1;
    font-size: 72px;
    font-size: 3.5rem;
    margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
    .hero__title {
        line-height: 1.4;
        font-size: 48px;
        font-size: 3rem;
    }
}

.hero__subtitle {
    margin-top: 20px;
    font-weight: bold;
    letter-spacing: .1em;

    display: inline-block;
    font-size: 160%;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2px 2px 10px #777,
        -2px 2px 10px #777,
        2px -2px 10px #777,
        -2px -2px 10px #777;
}

@media screen and (max-width: 768px) {
    .hero__subtitle {
        font-size: 16px;
        font-size: 1rem;
    }
}

.hero__scroll {
    position: absolute;
    right: 20px;
    bottom: 0;
    line-height: 1;
    display: inline-block;
    overflow: hidden;
    padding: 10px 10px 90px;
    text-decoration: none;
    text-decoration: none;
    letter-spacing: .2em;
    -ms-writing-mode: tb-rl;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    font-size: 0.75rem;
    writing-mode: vertical-lr;
}

@media screen and (max-width: 768px) {
    .hero__scroll {
        padding: 10px 10px 60px;
    }
}

.hero__scroll::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    content: "";
    animation: scrollDownLine 1.5s cubic-bezier(1, 0, 0, 1) infinite;
    background: #fff;
}

@media screen and (max-width: 768px) {
    .hero__scroll::after {
        height: 50px;
    }
}

.hero__link {
    margin-top: 50px;

}

@keyframes scrollDownLine {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }

    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }

    50.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }

    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }
}

.sub-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    color: #fff;
    background-image: url(/wp-content/uploads/2021/03/hero.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

@media screen and (max-width: 768px) {
    .sub-hero {
        height: 180px;
    }
}

.sub-hero__inner {
    padding: 50px 40px 10px 40px;
    text-align: center;
}

.message {
    margin-bottom: 30px;
    text-align: center;
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
    color: #FFFFFF;
}

.message__heading {
    font-weight: bold;
    line-height: 1;
    display: inline-block;
    margin-bottom: 40px;
    font-size: 40px;
    font-size: 2.5rem;

    color: #ffffff;
    text-shadow: 2px 2px 10px #777,
        -2px 2px 10px #777,
        2px -2px 10px #777,
        -2px -2px 10px #777;
}

@media screen and (max-width: 768px) {
    .message__heading {
        line-height: 1.5;
        font-size: 32px;
        font-size: 2rem;
    }
}

.message__underline {
    background: linear-gradient(transparent 70%, #f5f534 0%);
}

.sns-share__item {
    display: inline-block;
    margin-top: 5px;
    margin-right: 2px;
    vertical-align: bottom;
}

.sns-share__item:last-child {
    margin-right: 0;
}

.sns-share iframe {
    vertical-align: middle;
}

.fa-hatena::before {
    font-family: Verdana;
    font-weight: bold;
    content: "B!";
    letter-spacing: -.05em;
}

.swiper-container {
    padding-bottom: 30px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    position: absolute;
    top: 50%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: block;
    transform: translateY(-50%);
    color: #391e88;
    font-size: 32px;
    font-size: 2rem;
}

.swiper-button-next::after {
    content: "\f105";
}

.swiper-button-prev::after {
    content: "\f104";
}

.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0;
    text-align: right;
}

.swiper-pagination-bullet-active {
    background: #391e88;
}

/*----------------------------------
 news
----------------------------------*/
.news .l-inner {
    display: flex;
}

@media screen and (max-width: 768px) {
    .news .l-inner {
        display: block;
    }
}

.news__heading {
    margin-right: 50px;
}

@media screen and (max-width: 768px) {
    .news__heading {
        margin-right: 0;
        margin-bottom: 30px;
        text-align: center;
    }
}

.news__body {
    flex: 1;
}

/*----------------------------------
 service
----------------------------------*/
.service__heading {
    margin-bottom: 30px;
    text-align: center;
/*	    height: 150px;*/
    position: relative;
}

.service__body {
    margin-bottom: 30px;
}

.service__link {
    text-align: center;
}

/*----------------------------------
 works
----------------------------------*/
.works {
    padding: 60px 0 40px 0;
}

.works .l-inner {
    position: relative;
    display: flex;
    align-items: center;
    padding: 60px 20px;
}

@media screen and (max-width: 768px) {
    .works .l-inner {
        display: block;
        padding: 60px 20px;
    }
}

.works .l-inner::after {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: -1;
    display: block;
    width: 60%;
    height: 100%;
    content: "";
    transform: translateY(-50%);
    background-color: #f0f0f0;
}

@media screen and (max-width: 768px) {
    .works .l-inner::after {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 68%;
        transform: translateY(0);
    }
}

.works__img-wrapper {
    width: 59.52380%;
    margin-right: 30px;
}

@media screen and (max-width: 768px) {
    .works__img-wrapper {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

.works__contents {
    flex: 1;
    text-align: center;
}

.works__heading {
    margin-bottom: 30px;
}

.works__body {
    margin-bottom: 30px;
}

/*----------------------------------
 company
----------------------------------*/
.company {
/*    padding: 130px 0 130px 0;*/
    padding: 7% 0 7% 0;
    text-align: center;
    background-image: url(/wp-content/uploads/2021/03/pexels-fauxels-3184430_2.png);
    background-size: cover;
    background-position: center center, center center;

    position: relative;
    z-index: 0;
}

@media screen and (max-width: 768px) {
    .company {
/*        padding: 60px 0 60px;*/
        padding: 6% 0 6%;
        background-image: url(/wp-content/uploads/2021/03/pexels-fauxels-3184430_2.png);
        background-position: center center;
/*        background-size: 375px;*/
        background-size: 300%;
    }
}

.company::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    background: inherit;
    filter: blur(2px);
}

.company__heading {
    margin-bottom: 30px;
}

.company__body {
    margin-bottom: 30px;
}

/*----------------------------------
 recruit
----------------------------------*/
.recruit .l-inner {
    display: flex;
}

@media screen and (max-width: 768px) {
    .recruit .l-inner {
        flex-direction: column-reverse;
    }
}

.recruit__contents {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    background-color: #f0f0f0;
}

@media screen and (max-width: 768px) {
    .recruit__contents-inner {
        padding: 60px;
    }
}

.recruit__heading {
    margin-bottom: 30px;
    text-align: center;
}

.recruit__img-wrapper {
    flex: 0 0 59.9099%;
}

.recruit__img {
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .recruit__img {
        width: 100%;
        height: 140px;
        object-position: center -10px;
    }
}

.recruit__body {
    margin-bottom: 30px;
}

.news-detail__body {
    margin-bottom: 40px;
}

.post {
    background-color: #fff;
}

.post__head {
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .post__head {
        margin-bottom: 20px;
    }
}

.post__title {
    line-height: 1.5;
    font-size: 32px;
    font-size: 2rem;
}

@media screen and (max-width: 768px) {
    .post__title {
        font-size: 22px;
        font-size: 1.375rem;
    }
}

.post__info {
    display: flex;
    margin-top: 10px;
}

.post__date {
    margin-right: 10px;
    font-size: 13px;
    font-size: 0.8125rem;
}

.post__body {
    margin-bottom: 40px;
}

.post__body > h3 {
    position: relative;
    font-weight: bold;
    line-height: 1.6;
    margin-top: 60px;
    margin-bottom: 20px;
    padding-left: 20px;
    color: #393636;
    font-size: 24px;
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
    .post__body > h3 {
        margin-top: 40px;
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.post__body > h3::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    content: "";
    border-radius: 3px;
    background-color: #391e88;
}

.post__body > h3:first-child {
    margin-top: 0;
}

.post__body > h4 {
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 18px;
    font-size: 1.125rem;
}

@media screen and (max-width: 768px) {
    .post__body > h4 {
        font-size: 17px;
        font-size: 1.0625rem;
    }
}

.post__body > p {
    margin-bottom: 30px;
    font-size: 16px;
    font-size: 1rem;
}

@media screen and (max-width: 768px) {
    .post__body > p {
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

.post__body > p:last-child {
    margin-bottom: 0;
}

.post__sns {
    margin-bottom: 40px;
}

.post__pager__home {
    text-align: center;
}

.service-detail .media:not(:last-child) {
    margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
    .service-detail .media:not(:last-child) {
        margin-bottom: 40px;
    }
}

.works-list .card__img {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.greeting {
    padding: 100px 0 70px;
    background-image: url(/wp-content/uploads/2021/03/bg-circle.png), url(/wp-content/uploads/2021/03/bg-face.png);
    background-position: center -20px, center 40px;
}

@media screen and (max-width: 768px) {
    .greeting {
        padding: 60px 0 60px;
        background-image: url(/wp-content/uploads/2021/03/sp_bg-circle.png);
        background-position: center -20px;
        background-size: 375px;
    }
}

.greeting__heading {
    margin-bottom: 30px;
    text-align: center;
}

.greeting__message {
    margin-bottom: 160px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .greeting__message {
        margin-bottom: 60px;
    }
}

.company-info__heading {
    margin-bottom: 30px;
    text-align: center;
}

.company-info__table {
    margin-bottom: 60px;
}

.access__map {
    margin-bottom: 5px;
}

.access__map iframe {
    height: 400px;
    vertical-align: bottom;
}

@media screen and (max-width: 768px) {
    .access__map iframe {
        height: 240px;
    }
}

.access__map-link {
    font-size: 14px;
    font-size: 0.875rem;
}

.page-recruit {
    background-image: url(/wp-content/uploads/2021/03/bg-geometry.png);
    /* Background pattern from Toptal Subtle Patterns */
    background-repeat: repeat;
}

@media screen and (max-width: 768px) {
    .page-recruit {
        background-size: 50%;
    }
}

.recruit-message {
    text-align: center;
}

.recruit-message__heading {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 0 15px;
    color: #391e88;
}

@media screen and (max-width: 768px) {
    .recruit-message__heading {
        margin: 20px 0;
    }
}

.recruit-message__title {
    line-height: 1;
    margin-bottom: 10px;
    font-size: 72px;
    font-size: 4.5rem;
}

@media screen and (max-width: 768px) {
    .recruit-message__title {
        line-height: 1.2;
        font-size: 48px;
        font-size: 3rem;
    }
}

.recruit-message__subtitle {
    font-size: 32px;
    font-size: 2rem;
}

@media screen and (max-width: 768px) {
    .recruit-message__subtitle {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.recruit-message__body {
    margin-bottom: 40px;
    font-size: 16px;
    font-size: 1rem;
}

@media screen and (max-width: 768px) {
    .recruit-message__body {
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

.recruit-message__img-wrapper {
    overflow: hidden;
    height: 780px;
    background-image: url(/wp-content/uploads/2021/03/recruit01.jpg);
    background-repeat: no-repeat;
    background-position: center 80%;
    background-size: cover;
    clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
}

@media screen and (max-width: 768px) {
    .recruit-message__img-wrapper {
        height: 400px;
    }
}

.job-list {
    padding-top: 0;
}

.job-list__heading {
    margin-bottom: 30px;
    text-align: center;
}

.job-list__name {
    margin-bottom: 30px;
    text-align: center;
    font-size: 24px;
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
    .job-list__name {
        margin-bottom: 20px;
        font-size: 16px;
        font-size: 1rem;
    }
}

.job-list__detail {
    padding: 60px 95px;
    border: 1px solid #b067cf;
    border-radius: 6px;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .job-list__detail {
        padding: 30px 20px;
    }
}

.job-list__table {
    margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
    .job-list__table {
        margin-bottom: 40px;
    }
}

.job-list__link {
    text-align: center;
}

.job-list__link-note {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-size: 0.75rem;
}

.company-gallery__heading {
    margin-bottom: 40px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .company-gallery__heading {
        margin-bottom: 30px;
    }
}

.contact-form__lead {
    margin-bottom: 40px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .contact-form__lead {
        margin-bottom: 30px;
    }
}

.contact-form__body {
    padding: 90px;
    background-color: #f7f7f7;
}

@media screen and (max-width: 768px) {
    .contact-form__body {
        padding: 30px;
    }
}

/*--------------------------------
 以下、旅行サイト(架空サイト)用
---------------------------------*/


.wa {
    position: relative;
    /*    display: flex;*/
    align-items: center;
    justify-content: center;
    color: #fff;
    /*
    background-image: url(/wp-content/uploads/2021/03/171205hirayupp02_TP_V.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
*/
    
/*
     height: 100%;
    min-height: 100vh;
    padding-bottom: 120px;←footerの高さ
    box-sizing: border-box;
*/
}

/*
@media screen and (max-width: 768px) {
    .wa {
        width: 100vw;
    }
}
*/


.wa__main {
/*    display: block;*/
    max-width: 50vw;
    margin:0 auto;
}




@media screen and (max-width: 768px) {
    .wa__main {
        margin:0 0;
        max-width: initial;
    }
}


.wa__inner {
    padding: 0 40px;
/*    text-align: center;*/
   
}

@media screen and (max-width: 768px) {
    .wa__inner {
        text-align: left;
    }
}
/*

wa__heading {
    background: #0000FF;
    padding: 20px;
     position: relative;
}
*/

.wa__title {
    position: relative;
    font-weight: bold;
    line-height: 1;
    font-size: 72px;
    font-size: 3.5rem;
    margin-top: 100px;
    margin-bottom: 70px;
    font-family: 'Montserrat', 'ＭＳ 明朝', 'MS Mincho', sans-serif;
    color: #000;
}

@media screen and (max-width: 768px) {
    .wa__title {
        line-height: 1.4;
        margin: 3rem 0;
        font-size: 48px;
        font-size: 3rem;
    }
}

.wa__subtitle {
    margin-top: 20px;
    margin-top: 1.2%;
    font-weight: bold;
    letter-spacing: .1em;

    display: inline-block;
    font-size: 160%;
    font-weight: bold;
    color: #ffffff;
    /*
       text-shadow: 2px 2px 10px #777,
        -2px 2px 10px #777,
        2px -2px 10px #777,
        -2px -2px 10px #777;
*/
    font-family: 'Montserrat', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;

    position: absolute;
/*    padding: 20px;*/
    padding: 1.2%;
/*    left: 1500px;*/
    left: 86.7%;
/*    top: 650px;*/
    top: 26.6%;
/*
    
       right: 100px;
    bottom: 900px;
*/
}

@media screen and (max-width: 768px) {
    .wa__subtitle {
/*        font-size: 16px;*/
/*        font-size: 1rem;*/
        font-size: 0.8rem;
        
        left: 80.7%;
        top: 22.6%;
    }
}

.wa__scroll {
    position: absolute;
    right: 20px;
    bottom: 0;
    line-height: 1;
    display: inline-block;
    overflow: hidden;
    padding: 10px 10px 90px;
    text-decoration: none;
    text-decoration: none;
    letter-spacing: .2em;
    -ms-writing-mode: tb-rl;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    font-size: 0.75rem;
    writing-mode: vertical-lr;
}

@media screen and (max-width: 768px) {
    .wa__scroll {
        padding: 10px 10px 60px;
    }
}

.wa__scroll::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    content: "";
    animation: scrollDownLine 1.5s cubic-bezier(1, 0, 0, 1) infinite;
    background: #fff;
}

@media screen and (max-width: 768px) {
    .wa__scroll::after {
        height: 50px;
    }
}

.wa__link {
    margin-top: 50px;

}


.wa__btn{
    position: relative;
    font-weight: bold;
    line-height: 1.4;
    display: inline-block;
    width: 250px;
    padding: 20px 0;
    transition: .3s;
    text-align: center;
    text-decoration: none;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 50px;
    background-image: linear-gradient(-60deg, #16a085 0%, #23E86B 100%);
    background-size: 200% auto;
    font-size: 14px;
    font-size: 0.875rem;
}

.wa__btn:hover {
	text-decoration: none;
	opacity: 0.5;
}



.wa__access {
    text-align: center;
    background: #DACBAE;
    background-size: cover;
    width: 100vw;
}



.wa__company {
    /* padding: 130px 0 130px 0; */
    padding: 7% 0 7% 0;
    margin-top: 6rem;
    margin-bottom: 6rem;
    text-align: center;
    background-image: url(/wp-content/uploads/2021/03/旅館_後姿_3.jpg);
    background-size: cover;
    background-position: center center, center center;
    width: 100vw;
    z-index: 0;
}

@media screen and (max-width: 768px) {
    .wa__company {
/*        padding: 60px 0 60px;*/
        padding: 2rem 0 1rem;
        margin-top: 3rem;
        margin-bottom: 3rem;
        background-image: url(/wp-content/uploads/2021/03/旅館_後姿_3.jpg);
        background-position: center center;
/*        background-size: 375px;*/
        background-size: auto;
    }
}


/*
.wa__company::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    background: inherit;
    filter: blur(3px);
}
*/


.wa__company__heading {
    margin-bottom: 30px;
    /*
    background-image: linear-gradient(-60deg, #16a085 0%, #23E86B 100%);
    background-size: 200% auto;
*/

}



.wa__contact {
    /* margin-top: 40px; */
    /* padding: 80px 0; */
    padding: 3% 0;
    text-align: center;
    background-color: #f0f0f0;
    width: 100vw;
}


.wa__heading-primary {
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #23E86B;
    font-size: 2.25rem;
    position: absolute;
    top: auto;
    right: 0;
}



@media screen and (max-width: 768px) {
    .wa__heading-primary {
        font-size: 30px;
        font-size: 1.875rem;
    }
}


.wa__heading-primary2 {
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #23E86B;
    font-size: 36px;
    font-size: 2.25rem;
    
    position: absolute;
    top: 2140px;
    left: 1570px;
}



@media screen and (max-width: 768px) {
    .wa__heading-primary2 {
        font-size: 30px;
        font-size: 1.875rem;
    }
}



.wa__heading-primary--white {
    color: #fff;
}

.wa__heading-primary__sub {
    display: block;
    margin-top: 5px;
    letter-spacing: .02em;
    font-size: 13px;
    font-size: 0.8125rem;
}

span.wa__heading-primary__sub {
    display: block;
    text-align: left;
    margin-top: 14px;
    letter-spacing: .02em;
    font-size: 13px;
    font-size: 0.9125rem;
}


.wa__message__text {


    -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;

/*    height: 450px;*/
    height: 50%;
/*    height: 60%;*/

    font-weight: bold;
    letter-spacing: .15em;
/*    line-height: 65px;*/
    line-height: 290%;

/*    font-size: 150%;*/
    color: #000000;
    /*
       text-shadow: 2px 2px 10px #777,
        -2px 2px 10px #777,
        2px -2px 10px #777,
        -2px -2px 10px #777;
*/
    font-family: 'Montserrat', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    /*    font-family: 'Montserrat','游明朝','YuMincho','HG明朝E','ＭＳ Ｐ明朝','ＭＳ 明朝'','Noto Serif JP',serif;*/



    /*    display: inline-block;*/

/*    padding: 20px 100px;*/
    padding: 1.2% 5.7%;
    /*    padding-left: 50%;*/
    margin-top: 4.8%;
    margin-bottom: 4.8%;
    margin-right: auto;
    margin-left: auto;



    /*    display: table-cell;*/
}



@media screen and (max-width: 768px) {
    .wa__message__text {
       padding: 0px;
    }
}





.wa__message__text p {

    font-family: Montserrat, "ＭＳ Ｐ明朝", "MS PMincho", "Yu Mincho Light", YuMincho, "Yu Mincho", 游明朝体, sans-serif;

    writing-mode: vertical-rl;


/*    font-size: 100%;*/
    font-size: 150%;
    letter-spacing: .15em;
/*    line-height: 70px;*/
    padding: 5%;

    /*    display: inline-block;*/

    /*
    text-align: left;
     vertical-align: middle;
*/
    /*    align-items: center;*/


}


@media screen and (max-width: 768px) {
    .wa__message__text p {
       padding: 0px;
/*        padding-left: 5px;*/
        font-size: 1rem;
        padding-top: 2rem;
    }
}





.wa__l-section {
    padding: 0 0;
}


/*
.wa__l-inner { 
     
    
    display: inline-block;
    max-width: 1450px;
    max-height: 500px;
    margin: 0 auto;
    padding: 0 15px;
}
*/


.wa__service__title {
    
   writing-mode: vertical-rl;
      
       
    margin-top: 20px;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 75px;
    
/*    max-height: 75px;*/

    display: inline-block;
    font-size: 34px;
    font-weight: bold;
    color: #000000;

    font-family: 'Montserrat', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;


    position: relative;
    padding: 20px;
    left: 1380px;
/*    top: -200px;*/
    bottom: 300px;
    
/*     z-index: 1;*/
    
/*
    position: absolute;
    padding: 20px;
    left: 1050px;
    top: 1550px;
    
*/
    width: 100px;
    
    

}

div.wa__service__title  {
       line-height: 75px;
    display: inline-block;
    
     -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    
    
}




.wa__service__subtitle {

   writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
       

    margin-top: 20px;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 75px;

    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #000000;

    font-family: 'Montserrat', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;

    position: relative;
    padding: 20px;
    left: 1200px;
    top: 50px;
/*    bottom: 920px;*/
    
/*     z-index: 1;*/
    
    
}

@media screen and (max-width: 768px) {
    .wa__service__subtitle {
        font-size: 16px;
        font-size: 1rem;
    }
}





.wa__service__title2 {
     writing-mode: vertical-rl;
    
       
    margin-top: 20px;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 75px;
    
/*    max-height: 75px;*/

    display: inline-block;
    font-size: 34px;
    font-weight: bold;
    color: #FFFFFF;

    font-family: 'Montserrat', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;


/*    position: absolute;*/
    position: relative;
    padding: 20px;
    left: 1380px;
/*    top: -200px;*/
        top: 300px;
/*    bottom: 1050px;*/
    
text-shadow: 2px 2px 10px #777, -2px 2px 10px #777, 2px -2px 10px #777, -2px -2px 10px #777;
    
/*
    position: absolute;
    padding: 20px;
    left: 1050px;
    top: 1550px;
    
*/
    
    

}

div.wa__service__title2  {
    -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    
       line-height: 75px;
    display: inline-block;    
}




.wa__service__subtitle2 {

    writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
       

    margin-top: 20px;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 75px;

/*    display: inline-block;*/
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;

    font-family: 'Montserrat', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;

    position: relative;
    padding: 20px;
    left: 1250px;
    top: 150px;
/*    bottom: 1230px;*/
    
text-shadow: 2px 2px 10px #777, -2px 2px 10px #777, 2px -2px 10px #777, -2px -2px 10px #777;
}

@media screen and (max-width: 768px) {
    .wa__service__subtitle2 {
        font-size: 16px;
        font-size: 1rem;
    }
}






.wa__service__title3 {
    
    
      
       
    margin-top: 20px;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 75px;
    
/*    max-height: 75px;*/

/*    display: inline-block;*/
    font-size: 34px;
    font-weight: bold;
    color: #FFFFFF;

    font-family: 'Montserrat', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;


    position: absolute;
    padding: 20px;
    left: 1250px;
/*    top: -200px;*/
    bottom: 1050px;
    
text-shadow: 2px 2px 10px #777, -2px 2px 10px #777, 2px -2px 10px #777, -2px -2px 10px #777;
    
/*
    position: absolute;
    padding: 20px;
    left: 1050px;
    top: 1550px;
    
*/
    
    

}

div.wa__service__title3  {
       line-height: 75px;
    display: inline-block;
    
    -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
     writing-mode: vertical-rl;
}




.wa__service__subtitle3 {

    writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
       

    margin-top: 20px;
    font-weight: bold;
    letter-spacing: .1em;
    line-height: 75px;

    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;

    font-family: 'Montserrat', 'ＭＳ Ｐ明朝', 'MS PMincho', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;

    position: relative;
    padding: 20px;
    left: 1050px;
/*    top: 50px;*/
    bottom: 800px;
    
/*     z-index: 1;*/
}

@media screen and (max-width: 768px) {
    .wa__service__subtitle3 {
        font-size: 16px;
        font-size: 1rem;
    }
}


.wa__card {
    position :relative;
    
/*
    top: 2050px;
    left: 0px;
*/
    
    margin: 0px;
    
    
}

/*

img.wa__card__img {
    max-width: 1920px;
}
*/




.wa__card__img2 {
    width: 1600px;
    height: auto;
    
    position: relative;
    top: -200px;
    left: 50px;
    
    z-index: 0;
    
}



.wa__img__wrap {
/*    margin: 0 auto;*/
}


.wa__img__wrap img{
/*  width: 100%;*/
  transition-duration: 0.5s;
}

.wa__img__wrap:hover img{
  transform: scale(1.3);
  transition-duration: 0.5s;
}

@media screen and (max-width: 768px) {
    .wa__img__wrap img {
        width: 19rem;
    }
}





.wa__link2 {
    margin: 0px;

}



.wa__btn2 {
    position: relative;
    left: 50px;
    font-weight: bold;
    line-height: 1.4;
    display: inline-block;
    width: 200px;
    padding: 20px 0;
    transition: .3s;
    text-align: center;
    text-decoration: none;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 50px;
    background-image: linear-gradient(-60deg, #16a085 0%, #23E86B 100%);
    background-size: 200% auto;
    font-size: 14px;
    font-size: 0.875rem;
    
    
}

/*
.wa__btn2::after {
    position: absolute;
    top: 50%;
    right: 1.5em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    transition: .3s;
    transform: translateY(-50%);
    font-size: 14px;
    font-size: 0.875rem;
}
*/

.wa__btn2:hover {
    text-decoration: none;
/*     background-position: right center; */
/*     background: rgba(255,255,255,1); */
/*     color: #000000; */
	opacity: 0.5;
}

.wa__btn2:hover::after {
/*    right: 1.2em;*/
}

@media screen and (max-width: 768px) {
    .wa__btn2:hover::after {
        right: 1.5em;
    }
}


.wa__service__heading {
/*    margin-bottom: 60px;*/
    margin-bottom: 4.5rem;
/*    text-align: center;*/
}



@media screen and (max-width: 768px) {
    .wa__service__heading{
       margin-bottom: 3rem; 
    }
}








.wa__l-inner {
/*    max-width: 1140px;*/
    margin: 0 auto;
/*    padding: 0 15px;*/
}



.wa__contact__text {
    
    font-family: 'Montserrat', '游明朝体', 'Yu Mincho', 'Yu Mincho Light', 'YuMincho', 'MS PMincho', 'ＭＳ Ｐ明朝', sans-serif;
    color: #000;
}





.wa_card-wrapper--row3 {
    margin-right: 30px;
}



/*--------------------------------
 以下、ウォーターサーバー(架空サイト)用
---------------------------------*/

.server__html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
    
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
    
     height: 100%;
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 60px;/*←footerの高さ*/
    box-sizing: border-box;
}

.server__html > p {
/*    font-size: 1.02vw;*/
    font-size: 200%;
/*    margin-bottom: 20px;*/
}


.server__title {
    position: relative;
    font-weight: bold;
    line-height: 1;
    font-size: 72px;
    font-size: 3.5rem;
    margin-bottom: 40px;
}


.server_main_img {
width: 70vw;
    height: 65vh;
    margin-bottom: 50px;
    border: 0px solid #FFB03F;
}

@media screen and (max-width: 768px) {
	.server_main_img {
width: 100%; 
	}
}



.server__intro {
    background-color: #f0f0f0;
    width: 70vw;
    margin-bottom: 50px;
}


@media screen and (max-width: 768px) {
.server__intro {
	width: 100%;
}

    .server__intro td{
        display: block;
    }
}



.server__ul {
 border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
/*  width: 60vw;*/
     width: 70vw;
    margin-bottom: 50px;
}

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

.server__ul {
	width: 100%;
	}
}



.server__ul__dounyu {
 border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
     width: 62.5%;
/*    height:50vh;*/
/*    height: 65%;*/
    height: 22rem;
    background-color: #fafafa;
    margin-bottom: 50px;
}



@media screen and (max-width: 768px) {
    .server__ul__dounyu {
        height: 40rem;
    }
}




.server__ul__hitoripoint {
 margin-bottom: 10px;
 border: 0px;
 width: initial;
}


/*
@media screen and (max-width: 768px) {
    .server__ul__hitoripoint {
        margin-bottom: 0px;
    }
}
*/






.server__li {
     line-height: 1.5;
  padding: 0.5em 0;
/*  list-style-type: none!important;ポチ消す*/
     list-style-type: disc;
/*     font-size: 0.92vw;*/
    font-size: 110%;
}

.server__li p {
   padding-bottom: 0.2em;
    font-size: 111%;
}


/*
.server__li:before {

  font-family: "FontAwesome";
 

content: "\f00c";
  position: absolute;
  left : 1em;
 color: #ffb03f; 
    
}
*/

 /* left : 1em; 左端からのアイコンまで*/

/* color: #ffb03f; アイコン色*/


.server__li__check {
/*     line-height: 1.5;*/
/*    line-height: 3vh;*/
    line-height: 1.1rem;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
    
    font-weight: bold;
/*    font-size: 0.92vw;*/
    font-size: 1.1rem;
    
}


.server__li__check:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
/*    color: #000000;*/
    
}



.server__li__money {
     line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
/*     list-style-type: disc;*/
/*
    
    font-weight: bold;
*/
/*    font-size: 0.92vw;*/
    font-size: 110%;
    
}


.server__li__money:before {
  font-family: "Font Awesome 5 Free";
  content: "\f157";
  font-weight: 900;
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
/*    color: #000000;*/
    
}


.server__li__money p {
    padding-bottom: 0.2em;
    font-size: 111%;
}



.server__h2 {
    margin-top: 50px;
    margin-bottom: 30px;
    padding: 18px 20px;
/*    border-left: 5px solid #115a71;*/
    border-left: 5px solid #26ABFF;
    font-weight: bold;

/*    background-color: #ededed;*/
    background-color: #93FF59;
    
    line-height: 1.42857;
/*    font-size: 1.5vw;*/
     font-size: 300%;
    
/*    width: 74vw;*/
    width: 79vw;
}



@-webkit-keyframes modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}
@keyframes  modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}

.server__h2:target {
    -webkit-animation: modify 0.01s;
    animation: modify 0.01s;
}



.server__h2__dounyu {
    margin-top: 50px;
    margin-bottom: 30px;
/*    padding: 18px 20px;*/
    padding: 1rem 1rem;
/*    border-left: 5px solid #115a71;*/
    border-left: 5px solid #26ABFF;
    font-weight: bold;

    background-color: #fafafa;
    
    line-height: 1.42857;
/*    font-size: 1.5vw;*/
     font-size: 300%;
    
/*    width: 50vw;*/
    width: 62.5%;
}



@media screen and (max-width: 768px) {
    .server__h2__dounyu {
        font-size: 16px;
        font-size: 1rem;
    }
}





.server__h2__modelcase {
    margin-top: 30px;
    margin-bottom: 30px;
/*    padding: 18px 20px;*/

/*    border-left: 5px solid #26ABFF;*/
    font-weight: bold;

/*    background-color: #ededed;*/
/*    background-color: #93FF59;*/
    
    line-height: 1.42857;
/*    font-size: 1.5vw;*/
    font-size: 300%;
    
    width: max-content;
        
    position: relative;
  padding: 0.6em;
/*
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
*/
    background: #23E86B;
  border-radius: 7px;
    
}

.server__h2__modelcase:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #23E86B;
  width: 0;
  height: 0;
}



@media screen and (max-width: 768px) {
    .server__h2__modelcase {
        font-size: 16px;
        font-size: 1.2rem;
    }
}


.server__table__cost__top1 {
    border: solid 2px #ffb03f;
    margin-bottom: 20px;
    width: 50vw;
}

@media screen and (max-width: 768px) {
.server__table__cost__top1 {
width: 100%;
	}
}

.server__img__cost__top1 {
    width: 13.2rem;
}


@media screen and (max-width: 768px) {
    .server__img__cost__top1 {
/*         width: 7rem; */
		width: 8rem;
    margin-right: 10px;
    }
}


.server__table__cost__inner1 {
    border: solid 1px #000000;
    border-collapse: collapse;
    margin: 15px;
    margin-top: 10px;
    width: 37vw;
}

@media screen and (max-width: 768px) {
	.server__table__cost__inner1 {
width: 50vw;
	}
}


.server__table__cost__top2 {
    border: solid 2px #ffb03f;
    margin-bottom: 50px;
    width: 50vw;
}

@media screen and (max-width: 768px) {
.server__table__cost__top2 {
width: 100%;
	}
}



.server__table__cost__inner2 {
    border: solid 1px #000000;
    border-collapse: collapse;
    margin: 15px;
    margin-top: 10px;
    width: 36.9vw;
}

@media screen and (max-width: 768px) {
	.server__table__cost__inner2 {
width: 50vw;
	}
}


/* @media screen and (max-width: 480px) {
    .server__table__cost__inner2 {
        width: 47.5vw;
    }
} */


.server__img__cost__top2 {
    width: 13.4rem;
}

@media screen and (max-width: 768px) {
    .server__img__cost__top2 {
/*         width: 7rem; */
		width: 8rem;
    margin-right: 10px;
    }
}



.server__table__water {
    border: solid 2px #ffb03f;
    margin-bottom: 50px;
    width: 70vw;
}


@media screen and (max-width: 768px) {
.server__table__water {
width: 100%;
	}
	
    .server__table__water td{
        display: block;
    }
}



.server__table__servertype {
    border: solid 2px #ffb03f;
    margin-bottom: 50px;
    width: 70vw;
}

@media screen and (max-width: 768px) {
.server__table__servertype {
width: 100%;
	}
}

.server__img__servertype1 {
    width: 7rem;
    padding-top:15px;
    margin-left: 5px;
    margin-right: 5px;
}


@media screen and (max-width: 768px) {
    .server__img__servertype1 {
        padding-top: 0px;
        padding-bottom: 5px;
    }
}


.server__img__servertype2 {
   width: 8rem;
    padding-top:10px;
    padding-bottom: 10px;
}


@media screen and (max-width: 768px) {
    .server__img__servertype2 {
        padding-top: 0px;
        padding-bottom: 5px;
    }
}


@media screen and (max-width: 768px) {
    .server__table__servertype td{
        display: block;
    }
}


.server__table__deliver {
    border: solid 2px #ffb03f;
    margin-bottom: 50px;
    width: 70vw;
}


@media screen and (max-width: 768px) {
.server__table__deliver {
width: 100%;
	}

    .server__table__deliver td{
        display: block;
    }
}



.server__img__deliver1 {
    width: 11rem; 
    padding: 10px 5px;
}



@media screen and (max-width: 768px) {
    .server__img__deliver1 {
        padding-top: 0px;
        padding-bottom: 20px;
    }
}


.server__img__deliver2 {
    width: 11rem;
    padding-left: 5px;
    padding-right: 5px;
}




@media screen and (max-width: 768px) {
    .server__img__deliver2 {
        padding-top: 0px;
        padding-bottom: 10px;
    }
}





.server__h2__hitoripoint {
/*
    margin-top: 50px;
    margin-bottom: 30px;
*/
/*    padding: 18px 20px;*/
/*    border-left: 5px solid #115a71;*/
/*    border-left: 5px solid #26ABFF;*/
    font-weight: bold;

/*    background-color: #ededed;*/
/*    background-color: #93FF59;*/
    
    line-height: 1.42857;
/*    font-size: 1.5vw;*/
    font-size: 300%;
    
    width: 70vw;
    
    position: relative;
  color: black;
  background: #d0ecff;
  line-height: 1.4;
  padding: 0.25em 0.5em;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}



.server__h2__hitoripoint:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f00c Check';
  background: #2196F3;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em
}

@media screen and (max-width: 780px) {
    .server__h2__hitoripoint{
        width: 100%;
    }
    }


/* @media screen and (max-width: 480px) {
    .server__h2__hitoripoint{
        width: 18.4rem;
    }
    }
 */



.server__table__hitoripoint1 {
    border: solid 2px #ffb03f;
    padding: 0.5em 1em 0.5em 2.3em;
    margin-bottom: 50px;
    padding-right: 10px;
    width: 70vw;
}


@media screen and (max-width: 768px) {
.server__table__hitoripoint1 {
width: 100%;
	}

    .server__table__hitoripoint1 td{
        display: block;
    }
    }
    
/*
    .server__table__hitoripoint1 ul {
        margin-bottom: 0px;
    }
*/



.server__table__hitoripoint2 {
    border: solid 2px #ffb03f;
    margin-bottom: 50px;
    padding-right: 10px;
    padding: 0.5em 1em 0.5em 2.3em;
    width: 70vw;
}


@media screen and (max-width: 768px) {
.server__table__hitoripoint2 {
width: 100%;
	}

    .server__table__hitoripoint2 td{
        display: block;
    }
    }
    
/*
    .server__table__hitoripoint2 ul {
        margin-bottom: 0px;
    }
*/



.server__p__hitoripoint__top {
    font-weight: bold;
    padding-bottom: 0.4em;
}


@media screen and (max-width: 768px) {
    .server__p__hitoripoint__top{
        margin-top: 50px;
    }
    }




.server__p__hitoripoint {
    font-weight: bold;
    padding-bottom: 0.4em;
}




.server__point {
    position: relative;
}

.server__point__img {
    width: 98.6%;
    height: 35rem;
    margin-bottom: 40px;
    opacity: 0.7;
}


@media screen and (max-width: 768px) {
    .server__point__img {
       height: 50rem;
    }
}



.server__point h2 {
    position: absolute;
    top: 0;
    left: 0;
}

.server__point ul {
    position: absolute;
    top: 150px;
    left: 0;
}

.server__hitori__point {
/*
        margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 1em;
*/
/*    margin: 1em 1em 3em 1em;*/
    margin: 1em 1em 4em -1em;
    font-weight: 700;
/*    font-size:2.6rem;*/
    font-size: 110%;
    
}


@media screen and (max-width: 768px) {
    .server__hitori__point {
        font-size: 16px;
        font-size: 1rem;
        margin-top: 2rem;
/*        margin-bottom: 5rem;*/
        margin-bottom: 1rem;
    }
}


.server__hitori__point-s-14 {
    position: relative;
  padding-left: 5em;

}

.server__hitori__point span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 1.5rem;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(-60deg, #16a085 0%, #23E86B 100%);
  border: 1px solid #16A063;
}

.server__hitori__point span i {
  margin-right: 1rem;
}

/*
.server__hitori__point span:after {
  position: absolute;
  top: calc(50% - 7px);
  right: -11px;
  width: 0;
  height: 0;
  content: '';
  border-width: 7px 0 7px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #0075a9;
}

*/


/*
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
*/

/*
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;rem算出をしやすくするために
}
*/



.orange_btn,
a_orange.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}    

/*
body{color:#666;
   font-size:1.7rem; 
   font-family: 'Noto Sans JP', sans-serif; 
    
    }
*/
  
    #container{
/*        width:1000px;*/
        width: 60rem;
    text-align:center;
    margin:0 auto;
}



@media screen and (max-width: 768px) {
    #container {
        max-width: max-content;
        width: auto;
    }
}



.item li{list-style: none;
    display:inline-block;}


    
    
    .hide{display:none;}

    .flex_container{display:flex;
    justify-content: left;
    align-items: center;
        border-bottom: 3px dashed #99ccff;
    }
    
    
    
    .item_left{width:20%;margin:1rem 0;
    text-align:left;}
    .item{width:80%;text-align: left;}


    .filter-items{
        list-style: none;
   margin-top:10rem;
margin-right:8rem;
    text-align: left;
}
    
 @media screen and (max-width: 768px) {
    .filter-items {
     width:19rem;
    }
}


 
    #button{margin:1rem 0;}
    
    


    

.filter-items li {
    margin: 2rem 0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    
}
.filter-items li .li-title {
    font-size: 1.6rem;
    background: #5fc2f5;
    padding: 8px;
    text-align: left;
    color:#fff;
    font-weight: bold;
    letter-spacing: 0.05rem;
  background: -moz-linear-gradient(left, #66ccff, #FFF);
  background: -webkit-linear-gradient(left, #66ccff, #FFF);
  background: linear-gradient(to right, #66ccff, #FFF);
}




@media screen and (max-width: 768px) {
    .filter-items li .li-title {
    background: linear-gradient(to right, #66ccff, #CCEEFF);
    }
}





.filter-items li p {
    padding: 1rem;
    margin: 0;
}



    
    

button {
    
	background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    }
    
#button,#reset{

  position: relative;
  display: inline-block;
  font-weight: bold;
  padding:0 1rem;
  text-decoration: none;
  color: #fff;
  background: #66ccff;
  transition: .4s;
    cursor: pointer;


}

#button:hover,#reset:hover {
  background: #add8e6;
  color: #fff;
}

    
    
    .li-title{
        display: flex;
    justify-content: space-between;
        align-items: center;
    }



@media screen and (max-width: 768px) {
    .li-title {
        display: block;
width: 19rem;
    }
}



    .tool_contents{
        display: flex;
/*    padding:4rem 0 4rem 2rem;*/
        padding:0 0 0 2rem;
    justify-content: center;
    align-items: center;
}


@media screen and (max-width: 768px) {
    .tool_contents {
        display: block;
    }
}

 
    
    .osusume{
    color:#666;
        font-size: 1.2rem;
 padding:10px;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%);
}


    .item_txt{padding:2rem; font-size: 1rem;}    
    .item_detail{display: flex;
    justify-content:flex-start;
        border-bottom: 3px dashed #99ccff;
    padding:10px 0;}



@media screen and (max-width: 768px) {
    .item_txt {
     width: 17rem;
padding-left: 0px;
        padding-top: 15px;
    }
}

.item_txt p {
    font-size: 0.95rem;
}

    
    .water_type{width:50%;}    
    

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

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

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

@media screen and (max-width: 768px) {
    a.btn-c {
     padding: 1.5rem 3rem 1.5rem 0.75rem;
    }
}



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';
}

 
    .link{text-align:center;} 
    
    .tool {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
/*  background: #add8e6;*/
        background: #26ABFF;
/*font-size: 2rem;*/
        font-size: 180%;
text-align: center;
font-weight: bold;
}

.tool:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}

.tool a {
    position: relative;
}
    
    
    .color{color:orange;} 
    .color2{color:#ccc;}
    
    .sitename{
        padding-left:2rem;
/*font-size: 1.2rem;*/
}

@media screen and (max-width: 768px) {
    .sitename {
        padding-left: 0.5rem;
    }
}



    
    .item_img img{
/*        width:489px;*/
        width:30.5rem;
}


@media screen and (max-width: 768px) {
    .item_img img {
        width: 16rem;
padding-top: 10px;
    }
}


    .small{font-size:1.2rem;}
    
#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  width: 60px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f139';
  font-size: 50px;
  color: #3fefee;
}

#form1{line-height:300%;}


/*
.item_txt p {
    font-size: 1.0vw;
}*/