@charset "utf-8";
/*
Theme Name: yonetani
Description: yonetani
Theme URI:
Author: hagihara
Version: 1.0
License: ライセンス
License URI: ライセンスの URL
*/
/* ----------------------------------------------------------------------
 user reset
---------------------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  list-style: none;
}
table {
  border-collapse: collapse;
	box-sizing: border-box;
}
ul {
    list-style: none;
}
*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}
h2 {
	line-height: 1.6;
}
h5 {
	font-weight: 500;
}

/* ----------------------------------------------------------------------
 media query

@media (min-width: 768px) {

}
@media (min-width: 1025px) {

}
---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
 base
---------------------------------------------------------------------- */
html {
    font-size: 50%;
}
@media (min-width: 1025px) {
html {
    font-size: 62.5%;
}
}

body {
    color: #4C4948;
    font-family: YakuHanJP, "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    font-size: 1.8rem;
    line-height: 1.7;
}
@media (min-width: 768px) {
body {
    font-size: 1.8rem;
}
}
@media (min-width: 1025px) {
}

a {
	text-decoration: none;
	outline:none;
	cursor: pointer;
	word-break: break-all;
}
a:hover {
    transition: .3s;
}
a[target="_blank"]::after {
	font-family: "Font Awesome 5 Free";
	content: "\f35d";
	font-size: 0.8em;
    margin-left: 9px;
	margin-right: 9px;
	margin-top: 12px;
    font-weight: 700;
}

/* 例外 */
.icon-non-link a[target="_blank"]::after,
.top-slider a[target="_blank"]::after,
.top-sns a[target="_blank"]::after,
.link-area a[target="_blank"]::after {
	content: " ";
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

a img.shirokuro:hover {
	opacity: 1;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	transition: all .3s;
}

a img:hover {
  opacity: .8;
}

img.scale, img.responsive {
	max-width: 100%;
	height: auto;
}
img{
    -webkit-backface-visibility: hidden;
    vertical-align: bottom;
}
.border{
    border: 1px solid;
}
.border-main-color {
    border: 1px solid #225b9f;
}
.border-tp-main-color {
    border-top: 1px solid #225b9f;
}
.border-bm-main-color {
    border-bottom: 1px solid #225b9f;
}
.border-bm-main-color-2px {
    border-bottom: 2px solid #225b9f;
}

.border-bm-pink {
    border-bottom: 1px solid #ea6383;
}

.border-bm-web-blue {
    border-bottom: 1px solid #0583c9;
}

.border-bm-web-yellow {
    border-bottom: 1px solid #fce940;
}

.border-r-web-blue{
    border-right:none;
}
@media (min-width:768px) {
	.border-r-web-blue{
		border-right: 2px solid #0583c9;
	}
}

.border-flow {
	width: 100%;
	position: relative;
	color: #fff;
	text-align: center;
	height: 2px;
	background-color: #DDDDDD; /* 1E5DA0 */
}
.border-flow::after {
	width: 0;
	height: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	margin: 0 0 0 -30px;
	border: 30px solid transparent;
	border-top-color: #DDDDDD;
	content: '';
}


.shadow{
    text-shadow: 0px 2px 6px #666;
}

/* コピー用 */
pre {
	white-space: pre-wrap ;
	color: #555;
    font-family: YakuHanJP, "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    font-size: 1.4rem;
    line-height: 1.7;
	background: #FAFAFA;
	padding: 2rem;
}

/* ----------------------------------------------------------------------
 layout
---------------------------------------------------------------------- */
.flex{
    display: flex;
}

.fl-reverse {
	flex-direction: row-reverse;
}

.fl-wrap{
    flex-wrap: wrap;
}
.fl-column {
    flex-direction: column;
}
.fl-center{
    justify-content: center;
    align-items: center;
}
.fl-between{
    flex-wrap: wrap;
    justify-content: space-between;
}
.fl-justify{
    justify-content: center;
}
.fl-around{
    justify-content: space-around;
}
.fl-end{
	justify-content: flex-end;
}
.fl-start{
	justify-content: flex-start;
}

.fl-align-center {
    align-items: center;
}
.fl-align-start {
    align-items: flex-start;
}
.fl-align-self-start-only {
	align-self: flex-start;
}

.fl-align-self-end {
	align-self: center;
}
@media (min-width: 768px) {	
.fl-align-self-end {
	align-self: flex-end;
}
}

.fl-align-self-start {
	align-self: center;
}
@media (min-width: 768px) {	
.fl-align-self-start {
	align-self: flex-start;
}
}


.grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.grid-column{
    padding: 1.5rem 1rem;
}

/* 3つ */
.grid-3 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (min-width:768px) {
	.grid-3 {
		display: grid;
		gap: 3rem;
		grid-template-columns: repeat(auto-fit, minmax(29%, 1fr));
}
}


/* SP-2 PC-3 */
.grid-3-seo {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (min-width:768px) {
	.grid-3-seo {
		display: grid;
		gap: 3rem;
		grid-template-columns: repeat(auto-fit, minmax(29%, 1fr));
}
}

/* 7つ */
.grid-7 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (min-width:768px) {
	.grid-7 {
		display: grid;
		gap: 2rem;
		grid-template-columns: repeat(auto-fit, minmax(12%, 1fr));
}
}




.col-2 {
    width: 100%;
}
@media (min-width:768px) {
	.col-2 {
		width: 50%;
	}
}

.col-xs-2 {
    width: 50%;
}

.col-3{
    width: 100%;
}
@media (min-width:768px) {
	.col-3 {
		width: 31.5%;
	}
}

.col-xs-3 {
    width: 48%;
}
@media (min-width:768px) {
	.col-xs-3 {
		width: 31%;
	}
}

.col-4{
    width: calc(50% - 1px);
}
@media (min-width:768px) {
	.col-4 {
		width: calc(25% - 1px);
	}
}

.col-5 {
    width: calc(50% - 1px);
}
@media (min-width:768px) {
	.col-5 {
		width: calc(20% - 3px);
	}
}


/* sub-page */
.col-2-sub {
    width: 100%;
}
@media (min-width:768px) {
.col-2-sub {
    width: 48.5%;
}
}

.col-4-sub {
    width: calc(50% - 10px);
}
@media (min-width:768px) {
	.col-4-sub {
		width: calc(25% - 10px);
	}
}
@media (min-width:1025px) {
.col-4-sub {
    width: calc(25% - 20px);
}
}


/* per */
.col-2-10p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-10p {
    width: 10%;
}
}

.col-2-15p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-15p {
    width: 15%;
}
}

.col-2-20p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-20p {
    width: 20%;
}
}

.col-2-35p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-35p {
    width: 35%;
}
}


.col-2-45p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-45p {
    width: 45%;
}
}


.col-2-55p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-55p {
    width: 55%;
}
}

.col-2-65p {
    width: 100%;
}
@media (min-width:768px) {
	.col-2-65p {
		width: 65%;
	}
}


.col-2-75p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-75p {
    width: 75%;
}
}


.col-2-80p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-80p {
    width: 80%;
}
}

.col-2-90p {
    width: 100%;
}
@media (min-width:768px) {
.col-2-90p {
    width: 90%;
}
}







.contents,.contents-02,.contents-80{
	max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;	
	margin-right: auto;
    margin-left: auto;
}
@media (min-width:768px) {
	.contents{
        width: 94%;
    }
    .contents-02{
        width: 90%;
    }
    .contents-80{
        width: 90%;
    }
	.contents-recruit {
        width: 90%;
    }
}

@media (min-width: 1025px) {
	.contents{
        width: 120rem;
    }
    .contents-02{
        width: 100rem;
    }
	.contents-80{
        width: 80rem;
    }
	.contents-recruit {
		width: 50rem;
	}
}



.contents-hero {
	max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;	
	margin-right: auto;
    margin-left: auto;
}
@media (min-width:768px) {
	.contents-hero {
		width: 94%;
    }
}

@media (min-width: 1025px) {
	.contents-hero {
        width: 60rem;
	    padding-left: 0;
	    padding-right: 0;	
	}
}

.contents-web {
	max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;	
	margin-right: auto;
    margin-left: auto;
}
@media (min-width:768px) {
	.contents-web {
		width: 94%;
    }
}

@media (min-width: 1025px) {
	.contents-web {
        width: 120rem;
	    padding-left: 0;
	    padding-right: 0;	
	}
}

.contents-blog {
	max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;	
	margin-right: auto;
    margin-left: auto;
}
@media (min-width:768px) {
	.contents-blog {
		width: 94%;
    }
}

@media (min-width: 1025px) {
	.contents-blog {
        width: 110rem;
	    padding-left: 0;
	    padding-right: 0;	
	}
}



/*
@media (min-width: 1500px) {
	.contents{
        width: 120rem;
    }
    .contents-02{
        width: 120rem;
    }
}*/
.contents-width {
	margin-right: auto;
    margin-left: auto;
    max-width: 100%;
}
@media (min-width: 1025px) {
	.contents-width {
        width: 120rem;
    }
}
@media (min-width: 1500px) {
	.contents-width {
        width: 150rem;
    }
}

.text-c{
    text-align: center;
}
.text-r{
    text-align: right;
}
.text-lc,.text-l{
    text-align: left;
}
.text-cl{
    text-align: center;
}

@media (min-width:768px) {
.text-lc{
    text-align: center;
}
.text-cl{
    text-align: left;
}
}

/* ----------------------------------------------------------------------
 スマホ特例
---------------------------------------------------------------------- */
@media (max-width:767px) {
.sp-column {
    flex-direction: column;
}
.sp-center{
    text-align: center;
}
.sp-mgn {
	padding-left: 3rem;
	padding-right: 3rem;
}
.sp-mgn-seo {
	padding-left: 3rem;
	padding-right: 3rem;
}
.sp-mt-1 {
	margin-top: 1rem;
}
.sp-mt-2 {
	margin-top: 2rem;
}
.sp-mt-3 {
	margin-top: 3rem;
}
.sp-mt-5 {
	margin-top: 5rem;
}
.sp-mt-6 {
	margin-top: 6rem;
}
.sp-mt-7 {
	margin-top: 7rem;
}
.sp-mt-10 {
	margin-top: 10rem;
}
.sp-mt-m3{
    margin-top: -3rem;
}
.sp-pd-r3 {
	padding-right: 3rem;
}
.sp-pd-l3 {
	padding-left: 3rem;
}
}

/* ----------------------------------------------------------------------
 margin
---------------------------------------------------------------------- */
.mtb-1{
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.mtb-2{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

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


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

.mt-3{
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
	.mt-3{
	   	margin-top: 3rem;
	}
}

.mt-4{
    margin-top: 2rem;
}
@media (min-width: 768px) {
	.mt-4{
	   	margin-top: 4rem;
	}
}

.mt-5 {
	margin-top: 2.5rem;
}
@media (min-width: 768px) {
	.mt-5{
	   	margin-top: 5rem;
	}
}
.mt-6 {
	margin-top: 3rem;
}
@media (min-width: 768px) {
	.mt-6{
	   	margin-top: 6rem;
	}
}


.mt-7 {
	margin-top: 3.5rem;
}
@media (min-width: 768px) {
	.mt-7{
	   	margin-top: 7rem;
	}
}


.mt-8 {
	margin-top: 4rem;
}
@media (min-width: 768px) {
	.mt-8{
	   	margin-top: 8rem;
	}
}

.mt-10{
    margin-top: 5rem;
}
@media (min-width: 768px) {
	.mt-10{
	   	margin-top: 10rem;
	}
}


.mt-15{
    margin-top: 5rem;
}
@media (min-width: 768px) {
	.mt-15{
	   	margin-top: 15rem;
	}
}


.mt-20{
    margin-top: 5rem;
}
@media (min-width: 768px) {
	.mt-20{
	   	margin-top: 20rem;
	}
}

.mb-10{
    margin-bottom: 5rem;
}
@media (min-width: 768px) {
	.mb-10{
	   	margin-bottom: 10rem;
	}
}

.mb-15{
    margin-bottom: 7.5rem;
}
@media (min-width: 768px) {
	.mb-15{
	   	margin-bottom: 15rem;
	}
}

.mb-20{
    margin-bottom: 10rem;
}
@media (min-width: 768px) {
	.mb-20{
	   	margin-bottom: 20rem;
	}
}

.ml-04{
    margin-left: .4rem;
}
.ml-05{
    margin-left: .5rem;
}
.ml-1{
    margin-left: 1rem;
}
.ml-2{
    margin-left: 2rem;
}
.ml-3{
    margin-left: 3rem;
}

.mr-1{
    margin-right: 1rem;
}
.m-auto {
	margin-left : auto;
	margin-right: auto; 
}

.pt-1{
    padding-top: 1rem;
}


.pt-1-sp-0 {
    padding-top: 0rem;
}
@media (min-width: 768px) {
	.pt-1-sp-0 {
		padding-top: 1rem;
	}
}


.pt-2{
    padding-top: 2rem;
}


.pt-10 {
	padding-top: 5rem;
}
@media (min-width: 768px) {
	.pt-10 {
		padding-top: 10rem;
	}
}


.pd-1 {
    padding: 1rem;
}
.pd-2 {
    padding: 2rem;
}
.pd-3 {
    padding: 3rem;
}
.pd-4 {
    padding: 4rem;
}
.pd-5 {
    padding: 3.5rem;
}
@media (min-width: 768px) {
	.pd-5 {
		padding: 5rem;
	}
}


.pb-05{
    padding-bottom: .5rem;
}
.pb-1{
    padding-bottom: 1rem;
}
.pb-2{
    padding-bottom: 2rem;
}
.pb-3{
    padding-bottom: 3rem;
}

.pb-6{
    padding-bottom: 3rem;
}
@media (min-width: 768px) {
	.pb-6{
		padding-bottom: 6rem;
	}
}

.pb-20 {
	padding-bottom: 10rem;
}
@media (min-width: 1025px) {
.pb-20 {
	padding-bottom: 20rem;
}
}

.pd-bm-4 {
	padding-bottom: 2.5rem;
}
@media (min-width: 1025px) {
	.pd-bm-4 {
		padding-bottom: 4rem;
	}
}

.pd-tb-1 {
	padding: 1rem 0;
}
.pd-tb-2 {
	padding: 2rem 0;
}
.pd-tb-3 {
	padding: 3rem 0;
}

.pd-tb-4 {
	padding: 4rem 0;
}

.mg-lr-3 {
	margin-left: 3rem;
	margin-right: 3rem;
}

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


.mt-animation{
    margin-top: .5rem;
}
@media (min-width: 1025px) {
	.mt-animation {
		margin-top: -1.5rem;
	}
}

.height-100p {
	height: 100%;
}

.width-86p {
	width: 86%;
}

.width-40px{
    width: 40px;
}

	
/* ----------------------------------------------------------------------
 フォント関連
---------------------------------------------------------------------- */
/* サイズ */
.fs-100{
    font-size: 7.5rem;
    line-height: 1;
}
@media (min-width: 768px) {
	.fs-100{
    	font-size: 10rem;
	}
}


.fs-75{
    font-size: 5.625rem;
}
@media (min-width: 768px) {
	.fs-75{
    	font-size: 7.5rem;
	}
}

.fs-60{
    font-size: 4.02rem;
    line-height: 1.5;
}
@media (min-width: 768px) {
	.fs-60{
    	font-size: 6rem;
	}
}


.fs-45 {
    font-size: 3.375rem;
    line-height: 1.5;
}
@media (min-width: 768px) {
	.fs-45{
    	font-size: 4.5rem;
	}
}

.fs-30 {
	font-size: 2.25rem;
	line-height: 1.7;
}
@media (min-width: 768px) {
	.fs-30 {
		font-size: 3rem;
	}
}

.fs-25{
    font-size: 1.875rem;
    line-height: 1.7;
}
@media (min-width: 768px) {
	.fs-25{
    	font-size: 2.5rem;
	}
}

.fs-20{
    font-size: 1.8rem;
    line-height: 1.7;
}
@media (min-width: 768px) {
	.fs-20{
    	font-size: 2rem;
	}
}


.fs-16{
    font-size: 1.5rem;
    line-height: 1.7;
}
@media (min-width: 768px) {
	.fs-16{
    	font-size: 1.6rem;
	}
}


.fs-15{
    font-size: 1.3rem;
    line-height: 1.7;
}
@media (min-width: 768px) {
	.fs-15{
    	font-size: 1.5rem;
	}
}

.fs-70p {
    font-size: 70%;
}
.fs-75p {
    font-size: 75%;
}
.fs-80p {
    font-size: 80%;
}
.fs-90p {
    font-size: 90%;
}
.fs-95p {
    font-size: 95%;
}
.fs-110p {
    font-size: 110%;
}
.fs-120p {
    font-size: 120%;
}


/* 見出し */
.heading-60 {
	font-size: 4rem;
	line-height: 1.7;
	font-weight: 700;
}
@media (min-width: 768px) {
	.heading-60 {
		font-size: 6rem;
	}
}

.heading-50 {
	font-size: 3rem;
	line-height: 1.7;
	font-weight: 500;
}
@media (min-width: 768px) {
	.heading-50 {
		font-size: 5rem;
	}
}

.heading-40 {
	font-size: 2.75rem;
	line-height: 1.7;
	font-weight: 700;
}
@media (min-width: 768px) {
	.heading-40 {
		font-size: 4rem;
	}
}
.heading-40-a {
	border-bottom: 1px solid;
	padding-bottom: 1.5rem;
	color: #235A9F;
}


.heading-30 {
	font-size: 2.25rem;
	line-height: 1.7;
	font-weight: 500;
}
@media (min-width: 768px) {
	.heading-30 {
		font-size: 2.7rem;
	}
}
.heading-30-a {
	border-left: 7px solid #235A9F;
	padding-left: 1.8rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	color: #235A9F;
	background: #F7F7F7;
}
@media (min-width: 768px) {
	.heading-30-a {
		border-left: 9px solid #235A9F;
	}
}
.heading-30-b {
	background: #235A9F;
	padding-left: 1.8rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	color: #fff;
}
@media (min-width: 768px) {
	.heading-30-b {
	}
}


.heading-30-wb {
	background: #0583c9;
	padding-left: 1.8rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	color: #fff;
}
@media (min-width: 768px) {
	.heading-30-wb {
	}
}


.heading-30-wy {
	background: #fce940;
	padding-left: 1.8rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	color: #0583c9;
}
@media (min-width: 768px) {
	.heading-30-wy {
	}
}

.heading-30-chara {
	background: #ea6383;
	padding-left: 1.8rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	color: #fff;
}
@media (min-width: 768px) {
	.heading-30-wb {
	}
}

.heading-30-border-wb {
	border: 1px solid #0583c9;
	padding-left: 1.8rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	color: #0583c9;
}
@media (min-width: 768px) {
	.heading-30-border {
	}
}

/* fukidashi */
.heading-30-fuki{
    position:relative;
    background:#0583C9;
    text-align:center;
    color:#FFFFFF;
    	padding-left: 1.8rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.heading-30-fuki:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(5, 131, 201, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:21px;
    border-right-width:21px;
    margin-left: -21px;
    border-top-color:#0583C9;
    top:100%;
    left:50%;
}

/* number */
/* 青 */
.number-heading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width:1025px){
	.number-heading {
	}
}

.number-heading::after {
	position:absolute;
	content:"";
	display:block;
	width: 0px;
	height: 40px;
	background-color: #0583c9;
	
	bottom: 50%;
	transform: translateY(50%);
	right: 1rem;
}

@media (min-width: 768px){
	.number-heading::after {
		width: 3px;		
	}
}

/* ピンク */
.number-heading-pink {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.number-heading-pink::after {
	position:absolute;
	content:"";
	display:block;
	width: 0px;
	height: 40px;
	background-color: #ea6383;
	
	bottom: 50%;
	transform: translateY(50%);
	right: 1rem;
}

@media (min-width: 768px){
	.number-heading-pink::after {
		width: 3px;		
	}
}




/* 種類 */
.mincho {
	font-family: "Sawarabi Mincho";
}
.en{
   font-family: 'Josefin Sans', sans-serif;
	font-weight: 500;
	letter-spacing: .1em;
}

.bold{
    font-weight: 700!important;
}
.normal {
	font-weight: 500!important;
}
.underline {
	border-bottom: 2px solid;	
}
.underline-red {
	border-bottom: 1px solid #b94433;	
}
.maker {
	color: #235A9F;
	font-weight: 700;
	background: linear-gradient(transparent 0%, #e7f3fb 0%);
}
.line-10 {
    line-height: 1;
}
.line-15 {
	line-height: 1.5;
}
.line-16 {
	line-height: 1.6;
}
.line-20 {
	line-height: 2;
}
.line-25 {
	line-height: 2.5;
}

/* 色*/
.base-color{
    color: #e7f3fb;
}
.base-color-pink {
	color: #fce8e1;
}
.main-color{
    color: #235A9F;
}
.white{
    color: #fff;
}
.black{
    color: #111;
}
.gray {
	color: #4C4948;
}
.gray2 {
	color: #F1F1F1;
}
.gray3 {
	color: #676767;
}
.red {
	color: #b94433;
}
.pink {
	color: #ea6383;
}
.purple {
	color: #7274E4
}
.web-blue {
	color: #0583c9;
}
.web-yellow {
	color: #fce940;
}
/* インデント */
.indent-1 {
    padding-left:1em;
    text-indent:-1em;
}

/* position */
.p-relative {
	position: relative;
}


/* ----------------------------------------------------------------------
 背景色
---------------------------------------------------------------------- */
.bg {
    background: #ECF3FB;
}
.bg-base {
    background: #e7f3fb;
}
.bg-main {
    background: #235A9F;
}
.bg-yellow {
    background: #FEE100;
}
.bg-black {
    background: #111;
}
.bg-gray {
	background:#F7F7F7;
}
.bg-gray-02 {
	background: #F1F1F1;
}
.bg-red {
	background: #b94433;
}
.bg-pink {
	background: #ea6383;
}
.bg-pink-02 {
	background: #fdeff2;
}
.bg-top-service {
	background: #BADEE8;
}
.bg-white {
	background: #fff;
}
.bg-planning {
	background: #f4f8f8;
}

.bg-web-blue {
	background: #0583c9;
}
.bg-web-yellow {
	background: #fce940;
}
.bg-chara-yellow {
	background: #fef7da;
}
.bg-aqua {
	background: #e7f3fb;
}
.bg-fsc {
	background: #015C4D;
}
.border-radius-1 {
	border-radius: 1rem;
}
/* padding */
.bg-pd {
	padding-top: 7.5rem;
	padding-bottom: 7.5rem;
}
@media (min-width: 1025px) {
.bg-pd {
	padding-top: 15rem;
	padding-bottom: 15rem;
}
}
/* ----------------------------------------------------------------------
 Wordpressカラー
---------------------------------------------------------------------- */

/* editor-style.css へコピーすること */

.has-blue-color,a.has-blue-color {
	color: #225b9f;
}

.has-pink-color,a.has-pink-color {
	color: #ea6383;
}

.has-blue-base-color,a.has-blue-base-color {
	color:#e7f3fb;
}

.has-pink-base-color,a.has-pink-base-color {
	color: #fce8e1;
}
.has-white-color,a.has-white-color {
	color: #fff;
}

.has-red-color,a.has-red-color {
	color: #D80000 !important;
}

.has-orange-color,a.has-orange-color {
	color: #FFF9E6;
}

.has-gray-color,a.has-gray-color {
	color: #F5F5F5;
}

.has-yellow-color,a.has-yellow-color{
	color: #ffe500;
}

/* ハイライトで編集した文字 */
.has-inline-color {
	font-weight: 600;
}

/* background-color */
.has-blue-background-color,a.has-blue-background-color{
    background: #225b9f;
}
.has-pink-background-color,a.has-pink-background-color{
    background: #ea6383;
}

.has-blue-base-background-color,a.has-blue-base-background-color{
    background: #e7f3fb;
}
.has-pink-base-background-color,a.has-pink-base-background-color{
    background: #fce8e1;
}

.has-white-background-color,a.has-white-background-color{
    background: #fff;
}
.has-red-background-color,a.has-red-background-color{
	/*background: #B94433;*/
	background: #D80000;
}

.has-orange-background-color,a.has-orange-background-color{
	background: #FFF9E6;
}

.has-gray-background-color,a.has-gray-background-color{
	background: #F5F5F5;
}

.has-yellow-background-color,a.has-yellow-background-color{
	background: #ffe500;
}

/* 背景の余白 */
p.has-background {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    padding-left: 1.1em !important;
	padding-right: 1.1em !important;
	font-size: 94%;
}
@media (min-width: 768px) {
	p.has-background {
		padding-top: 1.25em !important;
		padding-bottom: 1.25em !important;
		padding-left: 1.75em !important;
		padding-right: 1.75em !important;
	}
}

/* ----------------------------------------------------------------------
 ページ内リンク
---------------------------------------------------------------------- */
.page-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
@media (min-width: 768px) {
	.page-link {
		justify-content: flex-start;
	}
}

.btn-page-link {
	display: flex;
	align-items: center;
	justify-content: center;
    
	text-align: center;
    font-weight: 700;
	font-size: 12px;
	margin-left: .5rem;
	margin-right: .5rem;
	
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: .5rem;
	padding-right: .5rem;
	
	
	color: #fff;
	background: #235A9F;
	border: 2px solid #235A9F;	
	width: 43%;
}
@media (min-width: 768px) {
	.btn-page-link {
		font-size: 16px;
		width: auto;
		padding-left: 2rem;
		padding-right: 2rem;
    }
}

.btn-page-link::after {
	font-family: "Font Awesome 5 Free";
	content: "\f13a";
    font-size: 0.8em;
    margin-left: 12px;
	margin-right: 0px;
	margin-top: 0px;
    font-weight: 700;
}

.btn-page-link:first-child {
	margin-left: .5rem;
}
@media (min-width: 768px) {
	.btn-page-link:first-child {
		margin-left: 0rem;
	}
}
.btn-page-link:hover {
	transition: all .2s;
	background: none;
	color: #235A9F;
}



/* ----------------------------------------------------------------------
 ラベル
---------------------------------------------------------------------- */
.label {
	padding: .5rem 1.5rem;
	font-size: 13px;
	font-weight: 500;
	vertical-align: middle;
}
@media (min-width: 1025px) {
	.label {
		font-size: 15.5px;
	}
}
.label-border {
	padding: .5rem 1.5rem;
	font-size: 13px;
	font-weight: 500;
	vertical-align: middle;
}
/* ----------------------------------------------------------------------
 ボタン
---------------------------------------------------------------------- */
.btn{
	display: block;
    height: 50px;
	line-height: 50px;
	text-align: center;
    font-weight: 700;
	border-radius: 60px;
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	min-width: 280px;
}
@media (min-width: 1025px) {
	.btn{
		height: 60px;
		line-height: 60px;
		width: 435px;
		margin-left: auto;
		margin-right: auto;
    }
}
.btn:hover {
  transition: all .2s;
}

/* +under arrow ver */
.btn-2 {
	display: block;
    text-align: center;
    font-weight: 700;
	border-radius: 60px;
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem;
	min-width: 280px;
}
@media (min-width: 1025px) {
	.btn-2 {
		width: 435px;		
    }
}
.btn-2:hover {
  transition: all .2s;
}

/**/
.btn-3 {
	display: block;
    height: 50px;
	line-height: 50px;
	text-align: center;
    font-weight: 700;
	border-radius: 60px;
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	min-width: 280px;
}
@media (min-width: 1025px) {
	.btn-3 {
		width: 435px;
		margin-left: auto;
		margin-right: auto;
    }
}
.btn-3:hover {
  transition: all .2s;
}

/* size-min */
.btn-min {
	display: block;
    height: 50px;
	line-height: 46px;
	text-align: center;
    font-weight: 700;
	border-radius: 60px;
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	min-width: 130px;
}
@media (min-width: 1025px) {
	.btn-min {
		margin-left: auto;
		margin-right: auto;
    }
}


/* size-min */
.btn-2-min {
	display: block;
    text-align: center;
    font-weight: 700;
	margin-left: auto;
	margin-right: auto;
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	min-width: 140px;
}
@media (min-width: 1025px) {
	.btn-2-min {
		padding-top: 3rem;
		padding-bottom: 3rem;
    }
}
.btn-2:hover {
  transition: all .2s;
}






/* PCで左よせボタン */
.btn-free {
	display: block;
    height: 50px;
	line-height: 50px;
	text-align: center;
    font-weight: 700;
	border-radius: 60px;
	width: 280px;
}
@media (min-width: 1025px) {
	.btn-free {
		height: 60px;
		line-height: 60px;
		width: 435px;
    }
}
.btn-free:hover {
  transition: all .2s;
}

/* PCで左よせボタン */
.btn-pc-left {
	display: block;
    height: 50px;
	line-height: 50px;
	text-align: center;
    font-weight: 700;
	border-radius: 60px;
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	min-width: 280px;
}
@media (min-width: 1025px) {
	.btn-pc-left {
		height: 60px;
		line-height: 60px;
		width: 320px;
		margin-left: 0;
    }
}
.btn-pc-left:hover {
  transition: all .2s;
}

.btn-items-contact {
	color: #ffffff;
}
.btn-items-contact:hover {
	color: #215B9F;
}



/* ancor-btn */
.ancor-btn{
	display: block;
    height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 10.5px;
    font-weight: 700;
	border-radius: 50px;
	min-width: 15rem;
}
@media (min-width: 768px) {
	.ancor-btn{
		font-size: 13px;
    }
}
@media (min-width: 1025px) {
	.ancor-btn{
		height: 50px;
		line-height: 50px;
		font-size: 15px;
		width: 90%;
    }
}
.ancor-btn:hover {
  transition: all .2s;
}


/* メインカラー */
.btn-main-color {
	color: #fff;
	background: #235A9F;
	border: 2px solid #235A9F;	
}
.btn-main-color:hover {
  background: none;
  color: #235A9F;
}

/* 白色 */
.btn-white {
	color: #235A9F;
	background: #fff;
	border: 2px solid #fff;
	
}
.btn-white:hover {
  background: none;
  color: #fff;
}


/* 印刷 */
.btn-printing {
	color: #fff;
	background: #7274E4;
	border: 2px solid #7274E4;
	
}
.btn-printing:hover {
  background: none;
  color: #7274E4;
}

/* 透明 */
.btn-tomei {
	color: #4C4948;
	background: none;
	border: 1px solid #4C4948;
}
.btn-tomei:hover {
	color: #fff;
	background: #235A9F;
	border: 1px solid #235A9F;
}


/* 透明-2 +arrow ver */
.btn-tomei-2 {
	color: #235A9F;
	background: none;
	border: 1px solid #235A9F;
}
.btn-tomei-2:hover {
	color: #fff;
	background: #235A9F;
	border: 1px solid #235A9F;
}
/* 透明 */
.btn-tomei-blue {
	color: #225b9f;
	background: none;
	border: 1px solid #225b9f;
}
.btn-tomei-blue:hover {
	color: #fff;
	background: #235A9F;
	border: 1px solid #235A9F;
}

/* 透明-red */
.btn-tomei-red {
	color: #b94433;
	background: none;
	border: 1px solid #b94433;
}
.btn-tomei-red:hover {
	color: #fff;
	background: #b94433;
	border: 1px solid #b94433;
}
/* 透明-pink */
.btn-tomei-pink {
	color: #ea6383;
	background: none;
	border: 1px solid #ea6383;
}
.btn-tomei-pink:hover {
	color: #fff;
	background: #ea6383;
	border: 1px solid #ea6383;
}







/* btn-hero */
.btn-hero{
	display: block;
    height: 50px;
	line-height: 45px;
	text-align: center;
    font-weight: 700;
	border-radius: 60px;
	min-width: 280px;
	color: #fff;
	background: #235A9F;
	border: 2px solid #235A9F;	
}
@media (min-width: 1025px) {
	.btn-hero{		
		width: 300px;
    }
}
.btn-hero:hover {
	background: none;
	color: #235A9F;
	transition: all .2s;
}

/* web-btn */
.btn-web {
	position: relative;
	color: #fff;
	background: none;
	border-bottom: 2px solid #fff;
	
	display: block;
    height: 50px;
	line-height: 50px;
    margin-left: 1.5rem;
	margin-right: 1.5rem;
	min-width: 180px;
	
	padding-left: 3rem;
}
@media (min-width: 1025px) {
	.btn-web{
		height: 55px;
		line-height: 55px;
		max-width: 250px;
		padding-left: 12%;
	}
}
.btn-web .arrow-web::before{
    content: '';
    width: 50px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 55%;
    right: 8.2%;
}
.bg-web:hover .btn-web .arrow-web::before{    
    right: 3.2%;
	transition: all .2s;
}

.btn-web .arrow-web::after{
    content: '';
    width: 9px;
    height: 9px;
    border: 0px;
    border-top: 1px solid #fff;
    /*border-right: 0px solid #fff;*/
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 55%;
    right: 9%;
    margin-top: -5px;
}
.bg-web:hover .btn-web .arrow-web::after{    
    right: 4%;
	transition: all .2s;
}


/* ----------------------------------------------------------------------
 表示・非表示
---------------------------------------------------------------------- */
.sp-only-on {
    display: block;
   }
@media (min-width: 768px) {
	.sp-only-on {
        display: none;
    }
}

.sp-on {
    display: block;
   }
@media (min-width: 1025px) {
	.sp-on {
        display: none;
    }
}

.tab-on {
    display: none;
}
@media (min-width: 768px) {
.tab-on {
    display: block;
}

}
.pc-on {
    display: none;
}
@media (min-width: 1025px) {
.pc-on {
    display: block;
}
}
/* ----------------------------------------------------------------------
 サイト共通
---------------------------------------------------------------------- */
/*
header{
    width: 100%;
    height: 8rem;
    position: fixed;
    z-index: 99;
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
@media (min-width: 1025px) {
	header{
        height: 15rem;
    }
}
@media (min-width: 1500px) {
	header{
        height: 15.5rem;
    }
}
*/
header{
    width: 100%;
    height: 8.5rem;
    position: fixed;
    z-index: 99;
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
@media (min-width: 768px) {
	header{
        height: 11rem;
    }
}


header a{
        color: #235A9F;
}
.header-con {
	text-align: center;
}

.seo {
	font-size: 1.1rem;
	color: #676767;
	margin: .8rem 0 0 0;
	padding: 0;
	/*line-height: .1rem;*/
}
@media (min-width: 768px) {
	.seo {
		margin: .5rem 0 0 0;
		/*line-height: 1.2;*/
	}
}
@media (min-width: 1025px) {
	.seo {
		margin: .5rem 0 0 0;
		/*line-height: .2rem;*/
	}
}

.seo a {
	font-size: 1.1rem;
	color: #676767;
	font-weight: 400;
	text-align: left;
}
.header-con-1 {
	display: flex;
	align-items: center;
	height: 8rem;
}
@media (min-width: 1025px) {
.header-con-1 {
	width: 120rem;
	height: 10rem;
	margin-left: auto;
	margin-right: auto;
    }
}
@media (min-width: 1500px) {
.header-con-1 {
	width: 150rem;
    }
}
.header-logo {
	display: flex;
	align-items: center;
	width: 45%;
	height: 100%;
    margin-left: 1.5rem;
	margin-right: 1.5rem;
	margin-top: -3rem;
}
@media (min-width: 768px) {
	.header-logo{
		width: 30rem;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
		margin-top: -1rem;
		height: 4rem;
    }
}

.header-logo a {
	display: flex;
	align-items: center;
}

.header-contact {
	display: none;
}
@media (min-width: 1025px) {
.header-contact {
	display: flex;
	/*width: 42rem;*/
	justify-content: space-between;
	align-items: center;
	margin-left: .5rem;
}
}
@media (min-width: 1500px) {
	.header-contact {
	/*	width: 54rem;*/
}
}

.header-mail a {
	display: none;
}
@media (min-width: 1025px) {
.header-mail a {
	display: block;
	color: #4C4948;
	background: url("images/top-head-icon01.png") no-repeat 1px center;
	background-size: 20px; 
	font-weight: 700;
	padding-left: 3rem;
	font-size: 14px;
}
}
@media (min-width: 1500px) {
.header-mail a {
	background-size: 28px; 
	padding-left: 4rem;
	font-size: 18px;
}
}
.header-mail a:hover {
	color: #235A9F;

}



.header-tel {
	display: none;
}
@media (min-width: 1025px) {
.header-tel {
	display: block;
	color: #4C4948;
	background: url("images/top-head-icon02.png") no-repeat 1px center;
	background-size: 20px; 
	font-weight: 700;
	padding-left: 3rem;
	font-size: 14px;
	margin-left: 1rem;
}
}
@media (min-width: 1500px) {
.header-tel {
	background-size: 28px; 
	padding-left: 4rem;
	font-size: 18px;
	margin-left: 2rem;
}
}



/*パソコンメニュー*/
.pc-nav {
	display: none;
}
/*
@media (min-width: 1025px) {
	.pc-nav{
        display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: .5rem;
		width: 120rem;
		margin-left: auto;
		margin-right: auto;
    }
    .pc-nav li{
        margin: 0;
		font-size: 16px;
		line-height: 1.7;
    }
	.pc-nav li a {
		color: #4C4948;
		font-weight: 700;
		
	}
    .pc-nav li a:hover{
        padding-bottom: 0.1rem;
        border-bottom: 2px solid #235A9F;
    }
}
@media (min-width: 1500px) {
	.pc-nav{
     	width: 150rem;
		margin-top: 1rem;
    }
    .pc-nav li{
		font-size: 18px;
    }
}
*/


@media (min-width: 1025px) {
	.pc-nav{
        display: flex;
		align-items: center;
		justify-content: space-around;
		margin-left: auto;
    }
    .pc-nav li{
        margin: 0;
		font-size: 12px;
		line-height: 1.7;
		margin-right: 1.5rem;
    }
	.pc-nav li a {
		display: block;
		color: #4C4948;
		font-weight: 700;
		
	}
    .pc-nav li a:hover{
        padding-bottom: 0.1rem;
        border-bottom: 2px solid #235A9F;
    }
}
@media (min-width: 1500px) {
	.pc-nav{
    }
    .pc-nav li{
		font-size: 13px;
		margin-right: 3rem;
    }
	.pc-nav li a {
		font-weight: 500;
		
	}
}




.menu-sub {
    position: relative;
}
.menu-sub{
    /*padding-left: 1rem;*/
}

.menu-sub:hover {
    -webkit-transition: all .2s;
    transition: all .2s;
}



.menu-sub-con {
    position: absolute;
    width: 16rem;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: all .2s;
    transition: all .2s;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}
@media (min-width: 1500px) {
	.menu-sub-con {
		width: 17rem;
	}
}

.menu-sub:hover .menu-sub-con {
    top: 2.35rem;
    visibility: visible;
    opacity: 1;
}



.menu-sub-con li{    
    background: #fff;
    top: 0;
    left: -4.5rem;
    height: 4.5rem;
	line-height: 4.5rem;
    padding: 0 .5rem;
    font-size: 1.3rem;
	visibility: hidden;
    opacity: 0;
}

.menu-sub:hover .menu-sub-con li {
    visibility: visible;
    opacity: 1;
}

.menu-sub-con li a:hover {
    border-bottom: none;
}

.menu-sub .menu-sub-con li {
    position: relative;
}
.menu-sub .menu-sub-con li:hover {
    background: #e7f3fb;
}



/* スマホメニュー */
.sp_nav{
        display: block;
}
@media (min-width: 1025px) {
	.sp_nav{
        display: none;
    }
}
.open #global-nav {
    z-index: 1000;
    visibility: visible;
}
#global-nav {
    visibility: hidden;
    position: fixed;
    display: table;
    vertical-align: middle;
    color: #fff;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 16px;
}
#global-nav ul {
    display: table-cell;
    vertical-align: middle;
    list-style: none;
}
#global-nav a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
}
/*nav-list*/
#global-nav ul li {
    opacity: 0;
    -webkit-transform: scaleX(0) translateX(-260px);
    transform: scaleX(0) translateX(-260px);
    -webkit-transition: none;
    transition: none;
}
.open #global-nav ul li {
    opacity: 1;
    -webkit-transform: scaleX(1) translateX(0);
    transform: scaleX(1) translateX(0);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}
.open #global-nav ul li:nth-child(2) {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}
.open #global-nav ul li:nth-child(3) {
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}
.open #global-nav ul li:nth-child(4) {
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}
.open #global-nav ul li:nth-child(5) {
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}
.open #global-nav ul li:nth-child(6) {
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
}
.open #global-nav ul li:nth-child(7) {
    -webkit-transition-delay: .7s;
    transition-delay: .7s;
}
.open #global-nav ul li:nth-child(8) {
    -webkit-transition-delay: .8s;
    transition-delay: .8s;
}
.open #global-nav ul li:nth-child(9) {
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
}
.open #global-nav ul li:nth-child(10) {
    -webkit-transition-delay: 1.0s;
    transition-delay: 1.0s;
}
.open #global-nav ul li:nth-child(11) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}
.open #global-nav ul li:nth-child(12) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}
.open #global-nav ul li:nth-child(13) {
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s;
}
.open #global-nav ul li:nth-child(14) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}
.open #global-nav ul li:nth-child(15) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}
.open #global-nav ul li:nth-child(16) {
    -webkit-transition-delay: 1.6s;
    transition-delay: 1.6s;
}

/*#nav-bg*/
#nav-bg {
    content: "";
    width: 45px;
    height: 45px;
	top: 8px;
    right: 10px;
    display: block;
    position: fixed;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 0.5rem 3rem rgba(153, 153, 153, 0.3);
    box-sizing: border-box;
    z-index: 999;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
@media (min-width: 768px) {
	#nav-bg {
		top: 18px;		
	}
}
.open #nav-bg {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .6s ease-out;
    transition: all .6s ease-out;
    background: #235A9F;
    width: 3000px;
    height: 3000px;
    margin-right: -1200px;
    margin-top: -1200px;
}
/*#nav-toggle*/
#nav-toggle {
    display: block;
    position: fixed;
    right: 18px;
    top: 2px;
    width: 25px;
    height: 30px;
    cursor: pointer;
    padding: 10px 11px;
    z-index: 1001;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 20px;
    background: #235A9F;
    left: 11px;
    zoom: 1;
    -webkit-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 12px;
}
#nav-toggle span:nth-child(2) {
    top: 19px;
}
#nav-toggle span:nth-child(3) {
    top: 26px;
}
@media (min-width: 768px) {
	#nav-toggle span:nth-child(1) {
		top: 20px;
	}
	#nav-toggle span:nth-child(2) {
		top: 27px;
	}
	#nav-toggle span:nth-child(3) {
		top: 34px;
	}
}


.open #nav-toggle {
    background: transparent;
}
.open #nav-toggle span {
    background: #fff;
}
.open #nav-toggle span:nth-child(1) {
    top: 25px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    zoom: 1;
}
.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
}
.open #nav-toggle span:nth-child(3) {
    top: 25px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    zoom: 1;
}

/* footer */
footer{
    max-width: 100%;
	height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
@media (min-width: 1025px) {
footer{
	height: 35rem;
    padding-top: 6rem;
}	
}


.footer-con-1 {
	max-width: 100%;
	margin-right: auto;
    margin-left: auto;
}
@media (min-width:768px) {
	.footer-con-1{
        width: 94%;
    }
}
@media (min-width: 1025px) {
	.footer-con-1 {
        width: 120rem;
    }
}
@media (min-width: 1500px) {
	.footer-con-1 {
        width: 150rem;
    }
}


.footer-nav {
	width: 48%;
}
@media (min-width: 768px) {
	.footer-nav {
		width: 25%;
	}
}
@media (min-width: 1025px) {
	.footer-nav {
		width: 16%;
	}
}

.footer-nav-first {
}
@media (min-width: 768px) {
	.footer-nav-first {
		margin-left: 4rem;
	}
}

.footer-nav a{
    color: #4C4948;
	font-weight: 700;
    font-size: 13px;
}
.footer-nav a:hover{
    padding-bottom: 0.1rem;
    border-bottom: 2px solid #235A9F;
}
.footer-nav li{
    margin-right: 1rem;
}
@media (min-width: 1025px) {
	.footer-nav li{
		margin-right: 4rem;
	}
}
/* これは削除してはいけない メニューの余白感に重要 */
.footer-nav li:last-child{
    margin-right: 0rem;
}

.footer-pd {
	margin-bottom: 5rem;
}

/*フッター住所*/
.footer-pref  {
	display: flex;
	flex-direction: column;
	align-items: center;	
	width: 100%;
	padding-top: 4rem;
}
@media (min-width: 1025px) {
.footer-pref  {
	flex-direction: row;
	justify-content: space-around;
	width: 120rem;
	padding-bottom: 6rem;
	padding-top: 0rem;
}
}
@media (min-width: 1500px) {
	.footer-pref  {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 24rem;
	}
}

.footer-pref-img {
	width: 26rem;
}
@media (min-width: 1025px) {
	.footer-pref-img {
		width: 32rem;
	}
}
@media (min-width: 1500px) {
	.footer-pref-img {
		width: 21rem;
	}
}

.footer-pref-con {
	font-size: 14px;
	line-height: 1.7;
}



.footer-pref-con-text {
	margin-top: 4rem;
}
@media (min-width: 1025px) {
	.footer-pref-con-text {
		margin-top: 0rem;
		font-size: 17px;
	}
}
@media (min-width: 1500px) {
	.footer-pref-con-text {
		margin-top: 4rem;
	}	
}


.footer-seo a {
	font-size: 1.2rem;
	color: #676767;
	font-weight: 500;
}
@media (min-width: 1025px) {
	.footer-seo a {
	}
}


/* サブナビ */
.sub-nav li {
	position: relative;	
	margin: 0 0 .5rem 1rem;
	margin-bottom: .5rem;
	margin-left: 1rem;
	
	padding-top: .5rem;
	padding-bottom: .1rem;
	padding-left: 1rem;
	font-size: 11px;
}

.sub-nav li::after {
    display: block;
    content: '';
    position: absolute;
    top: 1.3em;
    left: 0em;
    width: 6px;
    height: 2px;
    background-color: #235A9F;
}

.sub-nav li a {
    font-size: 11px;
    padding-top: 2px;
	padding-bottom: 2px;
	font-weight: 500;
	
}

/* サブサブナビ */
.sub-sub-nav li {
	position: relative;	
	margin-bottom: .1rem;
	padding-top: .5rem;
	padding-bottom: .1rem;
	padding-left: 1rem;
	font-size: 11px;
}
.sub-sub-nav li::after {
    display: block;
    content: '';
    position: absolute;
    top: 1.5em;
    left: 0em;
    width: 4px;
    height: 2px;
    background-color: #235A9F;
}
.sub-sub-nav li a {
    font-size: 11px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.copyright{
	display: flex;
	justify-content: center;
	background: #235A9F;
	font-size: 12px;
	padding: 1rem;
}
@media (min-width: 1025px) {
.copyright{
	padding: 2rem;
}
}

/* お問い合わせエリア */
.contact-area{
	display: flex;
	flex-direction: column;
	justify-content: center;
    width: 100%;
    padding-top: 7rem;
    padding-bottom: 7rem;	
    background: url("images/top-otoiawase-imag01-sp.png") right;
    background-size: cover;
}
@media (min-width: 768px) {
    .contact-area{
	    background: url("images/top-otoiawase-imag01.png") center;
		background-size: cover;
    }
}

@media (min-width: 1025px) {
    .contact-area{
		height: 31rem;
    }
}
@media (min-width: 1920px) {
	.contact-area{
	    background: url("images/top-otoiawase-imag02.jpg") right center no-repeat;		
    }
}

.contact-area-heading {
	font-size: 20px;
	font-weight: 700;
}
@media (min-width: 768px) {
	.contact-area-heading {
		font-weight: 500;
		font-size: 40px;
	}
}


/* ----------------------------------------------------------------------
 text-area
---------------------------------------------------------------------- */
.text-area {
	width: 100%;
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}
@media (min-width: 1025px) {
.text-area {
	width: 56rem;
	margin-left: 0;
	margin-right: 0;
}
}

.text-area-l {
	justify-content: center;
}
@media (min-width: 1025px) {
.text-area-l {
	justify-content: flex-end;
	margin-right: 10rem;
}
}

.text-area-r {
	justify-content: center;
}
@media (min-width: 1025px) {
.text-area-r {
	justify-content: flex-start;
	margin-left: 10rem;
}
}

/* text左右余白 **/
.text-pd {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}


/* ----------------------------------------------------------------------
 cta-area
---------------------------------------------------------------------- */
.cta-pc {
	display: none;
	position: fixed;
/*	left: 1rem;
	bottom: 1.5rem;*/
	right: 0rem;
	bottom: 11rem;
	z-index: 999;
}

.cta-tab {
	display: none;
	position: fixed;
	/*left: 1rem;
	bottom: 1.5rem;*/
	right: 0rem;
	bottom: 7.5rem;
	z-index: 999;
}
@media (min-width: 768px) {
	.cta-tab {
		right: 0rem;
		bottom: 13rem;
	}
}

.cta-pc img,
.cta-tab img {
	width: 73.5px;
}
@media (min-width: 768px) {
	.cta-pc img,
	.cta-tab img {
		width: 147px;
	}
}
.pagetop {
  display: none;
  position: fixed;
/*  right: 1rem;*/
	right: 1.6rem;
  bottom: 1.5rem;
	z-index: 999;
}

@media (min-width: 768px) {
	.pagetop {
		right: 3.2rem;
	}
}
@media (min-width: 1025px) {
	.pagetop {
		right: 2.5rem;
	}
}
.pagetop img {
	width: 48px;
}
@media (min-width: 768px) {
	.pagetop img {
		width: 96px;
	}
}


.yumail-sample {
 	display: none;
  	position: fixed;
	left: 1.2rem;
  	bottom: 1.5rem;
	z-index: 999;
}
@media (min-width: 768px) {
	.yumail-sample {
		left: 3.2rem;
	}
}
@media (min-width: 1025px) {
	.yumail-sample {
		left: 1.5rem;
	}
}
.yumail-sample img {
	width: 58px;
}
@media (min-width: 768px) {
	.yumail-sample img {
		width: 96px;
	}
}

/* ----------------------------------------------------------------------
 動画埋め込み
---------------------------------------------------------------------- */
.movie-wrap {
    position: relative;
    padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
    margin: 1rem auto 5rem auto;
}
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-width: 1025px) {
.movie-wrap {
    margin: 6rem auto 10rem auto;
	width: 80%;
}
}
/*-------------------------------------------------
 youtube
-------------------------------------------------*/
.wp-block-embed-youtube .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

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

/* ----------------------------------------------------------------------
 GoogleMap埋め込み
---------------------------------------------------------------------- */
.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

/* ----------------------------------------------------------------------
 table 横スクロール
---------------------------------------------------------------------- */
/* 横スクロール */
.scroll-area {
  overflow: auto;
  white-space: nowrap;
}
.scroll-area::-webkit-scrollbar {
  height: 7px;
}
.scroll-area::-webkit-scrollbar-track {
  background: #efefef;
}
.scroll-area::-webkit-scrollbar-thumb {
	background: #eee;
}
/*tb-type-01*/
.tb-type-01 {
	table-layout: fixed;
	width: 100%;
	min-width: 100%;
	border-top: 2px solid #235A9F;
    border-bottom: 2px solid #235A9F;
}


.tb-type-01 tr {
    
}
.tb-type-01 tr:nth-child(even) {
	background: #F1F1F1;
}
.tb-type-01 th {
	width: 11rem;
	vertical-align: middle;
	text-align: center;
	font-weight: 700;
	color: #235A9F;
	/*background: #e7f3fb;*/
	font-size: 13px;
	line-height: 1.5;
	padding: .5rem;
}
@media only screen and (min-width: 768px) {
.tb-type-01 th {
	width: 18rem;
	font-size: 16px;
}
}
@media only screen and (min-width: 1025px) {
.tb-type-01 th {
	width: 25rem;
	font-size: 18px;
	padding: 3rem 1rem;
}
}


.tb-type-01 td {
	width: 22rem;
	font-size: 12px;
	line-height: 1.5;
	padding: 2rem;
	text-align: center;
	vertical-align: middle;	
}
@media only screen and (min-width: 768px) {
	.tb-type-01 td {

		width: 25rem;
		font-size: 14px;
		padding: 2rem;
	}
}
@media only screen and (min-width: 1025px) {
	.tb-type-01 td {
		font-size: 18px;
	}
}

/* ----------------------------------------------------------------------
 リスト
---------------------------------------------------------------------- */
ul.list-01 li {
    position: relative;
    padding-left: 0.6em;
    line-height: 1.6;
    margin-top: 0.5rem;
}
ul.list-01 li:first-child{
    margin-top: 1.5rem;
}
ul.list-01 li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #235A9F;
}
/* ----------------------------------------------------------------------
 search-area
---------------------------------------------------------------------- */
/* 検索フォーム */
#search {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(35, 90, 159, 0.7);
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
           -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
         -moz-transform: translate(0px, -100%) scale(0, 0);
          -ms-transform: translate(0px, -100%) scale(0, 0);
         -o-transform: translate(0px, -100%) scale(0, 0);
              transform: translate(0px, -100%) scale(0, 0);    
    opacity: 0;
    display: none;
}

#search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
       -moz-transform: translate(0px, 0px) scale(1, 1);
          -ms-transform: translate(0px, 0px) scale(1, 1);
           -o-transform: translate(0px, 0px) scale(1, 1);
               transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
    z-index: 106;
    display: block;
}

#search input[type="search"] {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -51px;
    width: 60%;
    margin-left: 20%;
    color: rgb(255, 255, 255);
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .8);
    border-bottom: 2px solid rgba(255, 255, 255, .5);
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    outline: none;
	padding: 3rem .5rem;
}
  
#search .close {
    position: fixed;
    top: .5rem;
    right: 2.5rem;
    opacity: 1;
    font-size: 30px;
    color: #fff;
}
#search .close:hover{
  color: #235A9F;
  cursor: pointer;
}

#search input::placeholder {
	color: #ddd;
	font-family: 'Noto Sans JP', sans-serif;
  }

/* ----------------------------------------------------------------------
 WP
---------------------------------------------------------------------- */
/* メイン */
.post-area{
    width: 100%;
    box-sizing: border-box;
	line-height: 2;
}
@media (min-width: 768px) {
	.post-area{
		width: 75%;
	}
}
.post-area img {
	max-width: 100%;
	height: auto;
}
.post-area a {
	color: #225B9F;
}

/* サイド */
.category-nav{
    width: 100%;
    box-sizing: border-box;
	margin-top: 3rem;
}
@media (min-width: 768px) {
	.category-nav{
		width: 20%;
		margin-top: 0;
	}
}

/* サイドナビ */
.widgettitle {
	font-size: 18px;
	font-weight: 700;
	color: #235A9F;
	text-align: center;
	border-bottom: 2px solid;
	padding-bottom: 1.5rem;
	padding-left: 1rem;
}

@media (min-width: 768px) {
	.widgettitle {
		font-size: 20px;
		text-align: left;
	}
}

.widget_categories,
.widget_archive,
.widget_nav_menu {
    margin-top: 3rem;
}
.widget_categories li:first-child,
.widget_archive li:first-child,
.widget_nav_menu li:first-child {

    margin-top: 1.5rem;
}
.widget_categories li,
.widget_archive li,
.widget_nav_menu li {
    margin-top: 10px;
	padding-left: 1rem;
    font-weight: 700;
	font-size: 16px;
}
.widget_categories li a,
.widget_archive li a,
.widget_nav_menu li a {
    color: #4C4948;
}
.widget_categories li a:hover,
.widget_archive li a:hover,
.widget_nav_menu li a:hover {
    color: #235A9F;
}


/* pager */
.pager-wrapper {
  	padding-top: 5rem;
	width: 100%;
}
@media only screen and (min-width: 1025px) {
   .pager-wrapper {
      padding-top: 11rem;
	}
}
.pager {
  margin-bottom: 5rem;
  text-align: center;
}
  @media only screen and (min-width: 768px) {
    .pager {
      margin-bottom: 10rem;
	  }
}

a.page-numbers,
.current {
  background: #F8F8F8;
  padding: 10px 12px;
  margin: 0 2px;
  color: #235A9F;
  text-decoration: none;
}

.current {
  background: #235A9F;
  color: #FFF;
}

/* ブログ記事一覧 */
.post-list{
    display: flex;
    margin-top: 2.5rem;
    padding: 2rem;
    color: #4C4948;
	background: #F1F1F1;
}
.post-list:hover {
	background: #235A9F;
	color: #fff;
	transition: all .2s;
}
.list-title{
    font-size: 20px;
}
/*
.thumbnail img{
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    object-fit: cover;
    transition-duration: 0.3s;
}*/
.thumbnail img{
	margin-bottom: 2rem;
}

.date{
    margin-right: 0.5rem;
    padding: 0.25rem 0.75rem;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
}
.list-hover:hover .date{
    transition: .3s;
}


/*************************************
 ブロックエディタ 制作事例のテーブルタグ
**************************************/

/* テーブル全体を囲むコンテナで横スクロールを有効にする */
.post-area .wp-block-table {
    overflow-x: auto; /* テーブルがコンテナの幅を超えた場合に横スクロールバーを表示 */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
}

/* テーブルの基本スタイル */
.post-area .wp-block-table table {
    width: 100%;
    border-collapse: collapse; /* ボーダーを1本線に */
    font-size: 1.5rem;
    min-width: 600px; /* スマホでスクロールが発生しやすいように最小幅を設定（任意） */
}
@media only screen and (min-width: 1025px) {
	.post-area .wp-block-table table {
		font-size: 1.7rem;
	}
}

	
/* ヘッダー行(thead th)のスタイル */
.post-area .wp-block-table thead th {
    background-color: #235a9f; /* 背景色 */
    color: #fff; /* 文字色 */
    padding: 1em 0.5em;
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
}

/* ボディのセル(tbody td)のスタイル */
.post-area .wp-block-table tbody td {
    border: 1px solid #ddd; /* 罫線を見やすいように薄いグレーで追加 */
    padding: 0.8em 0.5em;
    line-height: 1.6;
    vertical-align: middle;
}

/* 偶数行に背景色を設定して見やすくする */
.post-area .wp-block-table tbody tr:nth-child(even) {
    background-color: #e7f3fb;
}

/* 1列目のセルのスタイル */
.post-area .wp-block-table td:first-child {
	width: 26%;
	padding-right: 1rem;
}
/* PC表示（幅1025px以上） */
@media only screen and (min-width: 1025px) {
    .post-area .wp-block-table td:first-child {
		width: 30%;
	}
}

/* 強調表示されている文字のスタイル (例: A4の行) */
.post-area .wp-block-table tbody strong {
	color: #235a9f;
}


/*************************************
 ブログ記事詳細 
**************************************/
.blog-title {
	text-align: left;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 2rem;
}
 @media only screen and (min-width: 768px) {
    .blog-title {
		font-size: 30px;
		margin-top: 1.5rem;
		margin-bottom: 4rem;
	  }
}

.blog-article p {
	margin-top: 20px;
	font-size: 15px;
}
 @media only screen and (min-width: 768px) {
	.blog-article p {
  		margin-top: 20px;
		font-size: 18px;
	}
}

.blog-article a {
  border-bottom: 1px solid;
  padding-bottom: 1px;
  color: #225B9F;
}

.blog-article a:hover {
  border-bottom: none;
}

.navigation {
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
    .navigation {
      margin-top: 6rem;
	}
}

.navigation a {
  display: block;
  color: #235A9F;
  font-weight: 500;
  padding: 10px 5px;
}
@media only screen and (min-width: 768px) {
   .navigation a {
      padding: 0;
	  }
}

.left-pager {
  float: left;
  max-width: 500px;
}
  @media only screen and (min-width: 768px) {
    .left-pager {
      max-width: 50%;
	  }
}

.right-pager {
  float: right;
  max-width: 500px;
}
  @media only screen and (min-width: 768px) {
    .right-pager {
      max-width: 50%;
	  }
}

/* 制作事例一覧 */
.menu-production {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 100%;
}
@media only screen and (min-width: 768px) {
	.menu-production {
		text-align: left;
		flex-direction: row;
	}
}
.menu-production h4 {
	text-align: center;
	font-size: 24px;
}
@media only screen and (min-width: 768px) {
	.menu-production h4 {
		text-align: left;
	}
}

.menu-production-menu-container {
	display: flex;
	justify-content: center;
}
ul#menu-production-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}


ul#menu-production-menu li {
	margin-left: 0rem;
	margin-bottom: 2rem;
	width: 33%;
}
@media only screen and (min-width: 768px) {
	ul#menu-production-menu li {
		margin-left: 3.5rem;
		margin-bottom: 1.5rem;
		width: auto;
}
}

ul#menu-production-menu li a {
	color: #4C4948;
	font-size: 15px;
	font-weight: 700;	
}
@media only screen and (min-width: 768px) {
ul#menu-production-menu li a {
	font-size: 16px;
	width: auto;
	border-bottom: none;	
}
}

ul#menu-production-menu li a:hover{
	color: #225BA0;
}


.post-title-production {
	line-height: 1.5;
	font-size: 15px;
	font-weight: 700;
	color: #4C4948;
	text-align: left;
}
@media only screen and (min-width: 768px) {
    .post-title-production {
		width: 100%;
		font-size: 18px;
	  }
}
.post-title-production:hover {
	color: #235A9F;
}
.post-status {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.post-status-cat {
	display: flex;
	flex-wrap: wrap;
}

.post-status-date {
	margin-left: 1rem;
	margin-top: .7rem;
	font-size: 15px;
	color: #524948;
}

.post-status-cat span {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .3rem 1.5rem;
	font-size: 13px;
	color: #fff;
	min-width: 80px;
	background: #235A9F;
	margin-right: .5rem;
	margin-top: .5rem;
}
/* ラベルカラー */
/* production */
.production_design {
	background: #235A9F;
}
.production_web {
	background: #235A9F;
}
.production_anime {
	background: #235A9F;
}
.production_printing {
	background: #235A9F;
}
.production_production_futo {
	background: #235A9F;
}
/* news */
.news_category {
	background: #235A9F;
}
/* blog */
.blog_category {
	background: #235A9F;
}


.production-border {
	border-bottom: 1px solid #ccc;
	padding-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
	.production-border {
		border-bottom: 1px solid #ccc;
		padding-bottom: 2rem;
	}
}

/* その他制作事例 */

.production-other {
	font-size: 20px;
	text-align: left;
}
@media only screen and (min-width: 768px) {
	.production-other {
		font-size: 24px;
	}
}
/* 一覧のサムネイル */
/*.thumnail img {
	min-height: auto;
}

@media only screen and (min-width: 768px) {
.thumnail img {
	min-height: 300px;
}
}*/



/* 1位（赤色） */
.rank-red {
    color: #FF0000;
	font-weight: 700;
}

/* 2位（オレンジ色） */
.rank-orange {
    color: #FFA500;
	font-weight: 700;
}

/* 3位（黄色） */
.rank-yellow {
    color: #FFD700;
	font-weight: 700;
}

/* ----------------------------------------------------------------------
 blog-add
---------------------------------------------------------------------- */
:root {
	--main-color: #235A9F;
	--orange: #FFA500;
	
	--bg-color: #f3f9fd;
	--fs-h1: 3.1rem;
	--fs-h2: 2.4rem;
	--fs-h3: 2.2rem;
	--fs-h4: 2rem;
}

/* アイキャッチ画像のスタイル */
.post-featured-image {
    margin-bottom: 2em; /* 投稿内容との間隔を調整 */
    text-align: center; /* 画像を中央揃えに */
}

.post-featured-image img.responsive {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px; /* 角を丸くする場合 */
}


/* single.phpに投稿タイプがpostのときだけ付与するスタイル .post-con */

.post-con {

}


.post-con .blog-title {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.5;
	background: none;
	padding: 0;
	margin-bottom: -.75rem;
    margin-top: 1em;
}

@media screen and (min-width: 768px) {
    .post-con .blog-title {
        font-size: var(--fs-h1);
    }
}

.post-con>* {
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 100%;
}
@media screen and (min-width: 768px) {
	.post-con>* {
		margin-top: 3em;
		margin-bottom: 3em;
	}
}

.post-con>figure {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.post-con>h2 {
	position: relative;
	background-color: var(--bg-color);
	padding: .87em .87em .87em 1.21em;
	margin-bottom: -.75rem;
    margin-top: 2.5em;
	font-size: var(--fs-h2);
}

@media screen and (min-width: 768px) {
    .post-con>h2 {
        padding: .87em .87em .87em 1.44em;
        margin-top: 2.32em;
    }
}

.post-con>h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.5;
	border-left: solid 5px var(--main-color);
    border-bottom: 1px dashed var(--main-color);
    padding: .25em 0 .5em 1em;
    margin-top: 2.5rem;
    margin-bottom: -.25rem;
}

@media screen and (min-width: 768px) {
    .post-con>h3 {
        margin-top: 3rem;
		margin-bottom: -.75rem;
    }
}

.post-con>h4 {
	font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.5;
	margin-bottom: -2rem;
}
@media screen and (min-width: 768px) {
	.post-con>h4 {
		margin-bottom: -2.5rem;
	}
}

.post-con>ul {
	border: 1px solid #e6e6e6;
    padding: 1.25em !important;
}
@media screen and (min-width: 768px) {
    .post-con>ul {
        padding: 1.5em !important;
    }
}


.post-con>li:first-child {
    margin-top: 0;
}
.post-con>ul li {
    position: relative;
	margin-top: .5em;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 1em;
    line-height: 1.5em;
	padding-left: 3rem !important;
}

.post-con>ul li::before {
    position: absolute;
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
    content: "\f00c" !important;
	color: var(--orange);
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}



/* -------------------------
   目次
   ------------------------- */
/* --bg-color #f3f9fd  #f9fcfe */


/* 全体の枠 */
#ez-toc-container {
    /*border-width: 2px !important;
    border-radius: 0;
    margin-top: 2rem;*/
	width: calc(100% - 2rem);
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	padding-bottom: 3rem !important;
}
@media only screen and (min-width: 768px) {
	#ez-toc-container {
		width: calc(100% - 6rem);
		padding-left: 3rem !important;
		padding-right: 3rem !important;
		padding-bottom: 4rem !important;
	}
}


#ez-toc-container a {
    color: #222;
    box-shadow: none;
    text-decoration: none;
    text-shadow: none;
    display: inline-flex;
    align-items: stretch;
    flex-wrap: nowrap;
}

/* h2のブロック */
ul.ez-toc-list a.ez-toc-link {
    padding-left: 10px !important;
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 10px !important;
}
@media only screen and (min-width: 768px) {
	ul.ez-toc-list a.ez-toc-link {
		padding-left: 10px !important;
		padding-top: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 18px !important;
	}
}

/* この記事の目次のタイトル */
.ez-toc-title-container {
    display: block;
    width: 100%;
    min-width: 180px;
    text-align: center;
}

/* 文字 */
div#ez-toc-container p.ez-toc-title {
	display: block;
    text-align: center;
	margin-top: 3rem;
    margin-bottom: 3rem;
	font-size: 2rem;
	font-weight: 600;
}

/* 折りたたみのスタイル */
.ez-toc-title-toggle {
    position: absolute;
    top: 13px;
    right: 15px;
}

/* ul リスト */
ul.ez-toc-list a.ez-toc-link {
    display: block;
    border-bottom: 1px solid #f3f9fd;
}

/* Easy Table Of Contentsによる目次に番号振りをする */
#ez-toc-container .ez-toc-list {
	margin-left: 0;
}
#ez-toc-container ul.ez-toc-list li {
	list-style: none;
}
#ez-toc-container ul, #ez-toc-container.counter-hierarchy ul, .ez-toc-widget-container.counter-flat ul, .ez-toc-widget-container.counter-hierarchy ul {
	counter-reset: item;
}
#ez-toc-container ul.ez-toc-list li a::before, .ez-toc-widget-container ul.ez-toc-list li a::before {
	content: counters(item, ".") ". ";
	counter-increment: item;
}


/* サイドウィジェット用 目次 */
.category-nav #ez-toc-container #ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li a {
    font-size: 1.4rem;
    font-weight: 400;
    color: #000;
}

.category-nav #ez-toc-container ul.ez-toc-list a.ez-toc-link {
    padding: 0 0 0 10px !important;
}

/* -------------------------
   監修者
   ------------------------- */

/* 基本の変数設定 */
:root {
    --text-color: #333;
    --background-color: #fff;
    --border-radius: 6px;
    --transition-speed: 0.3s;
}

/* プロフィールボックスの基本スタイル */
.profile-box {
    margin: 1.4em 0;
    border: 2px solid var(--main-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    overflow: hidden;
}

/* タイトル部分のスタイル */
.profile-title {
    background-color: var(--main-color);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 0.6em 1em;
    position: relative;
}

.profile-title i {
    margin-right: 0.5em;
}

/* プロフィール内容のスタイル */
.profile-body {
    padding-top: 1.5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-bottom: 1em;
}

.profile-content {
    display: flex;
    align-items: flex-start;
}

.profile-image {
    border-radius: 50%;
    margin-right: 1em;
}

.profile-info {
    flex: 1;
    color: var(--text-color);
}

.status {
    font-size: 1.8rem;
    color: var(--main-color);
    margin-bottom: 0;
}

.name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5em;
    letter-spacing: 1px;
}

/* プロフィールのトグル機能 */
.profile-toggle input {
    display: none;
}

.profile-toggle label {
    display: inline-block;
    padding: 0.2em 0.8em;
    background-color: var(--main-color);
    color: #fff;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color var(--transition-speed);
    font-size: 1.2rem;
    border: 2px solid #fff;
}

.profile-toggle label:before {
    font-family: "Font Awesome 5 Free";
    content: '\f078'; /* Font Awesomeの下向き矢印 */
    margin-right: 0.5em;
    transition: transform var(--transition-speed);
}

.profile-toggle input:checked + label:before {
    content: '\f00d'; /* Font Awesomeの「×」アイコン */
    transform: rotate(360deg);
}

.profile-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed) ease, opacity var(--transition-speed) ease;
    color: var(--main-color);
    margin-top: 1em;
}

.profile-toggle input:checked ~ .profile-details {
    max-height: 500px; /* 必要に応じて調整 */
    opacity: 1;
}

/* プロフィール詳細のスタイル */
.profile-subtitle {
    display: block;
    font-weight: 700;
    border-bottom: 1px solid var(--main-color);
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    font-size: 1.6rem;
}

.profile-description {
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

/* レスポンシブデザイン */
@media (max-width: 767px) {
    .profile-content {
        flex-direction: column;
        align-items: center;
    }

    .profile-image {
        margin-bottom: 1em;
    }

    .profile-info {
        text-align: center;
    }
}

/* -------------------------
   CTA
   ------------------------- */
/* CTAエリアのスタイル */

.wp-cta-area {
    background: linear-gradient(135deg, #F9FCFE, #F3F9FD);
    border-radius: 10px;
    text-align: center;
    margin: 4rem 0;
	text-align: center;
	padding: 3rem;
}
@media only screen and (min-width: 768px) {
	.wp-cta-area {
		padding: 4rem;
	}
}

.wp-cta-area .cta-title {
    font-size: 3rem;
	line-height: 1.6;
    font-weight: bold;
    margin-bottom: 15px;
	text-align: left;
}
@media only screen and (min-width: 768px) {
	.wp-cta-area .cta-title {
		margin-bottom: 20px;
		text-align: center;
	}
}

.wp-cta-area .cta-text {
    font-size: 1.8rem;
    line-height: 2;
    margin-bottom: 2rem;
	text-align: left;
}
@media only screen and (min-width: 768px) {
	.wp-cta-area .cta-text {
        font-size: 1.8rem;
		margin-bottom: 3rem;
    }
}

.wp-cta-area .cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #ff7f50;
    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 10px;
	margin-bottom: 15px;

}
@media only screen and (min-width: 768px) {
    .wp-cta-area .cta-button {
        padding: 10px 20px;
        font-size: 1.6rem;
		margin-top: 15px;
    }
}


.wp-cta-area .cta-button:hover {
    background-color: #ff5722;
    transform: translateY(-3px);
}

.wp-cta-area .cta-button i {
    margin-right: 8px;
}



.wp-cta-area ol.cta-list {
    font-size: 1.8rem;
    line-height: 2;
    text-align: left;
    margin-bottom: 2rem;
	margin-top: 4rem;
}

@media only screen and (min-width: 768px) {
    .wp-cta-area ol.cta-list {
        font-size: 1.8rem;
        margin-bottom: 3rem;
    }
}

.wp-cta-area ol.cta-list li ul {
    margin-bottom: 3rem;
	line-height: 2;
}


.wp-cta-area .cta-list li {
	text-align: left;
}

.wp-cta-area .cta-list li strong {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
}

.wp-cta-area .cta-list ul {
    list-style-type: disc;
    margin-left: 2rem;
    margin-top: 0.5rem;
}






/* ----------------------------------------------------------------------
 top-page
---------------------------------------------------------------------- */
.full {
	position: relative;
}

.full a {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: calc(100vh - 8rem);
	margin-top: 8rem;
}
@media (min-width: 1025px) {
	.full a {
		height: calc(100vh - 10rem);
		margin-top: 10rem;
	}
}
.full a.img01 {
	background-image: url("images/top-main-img01-sp.jpg");
 }
 .full a.img02 {
	background-image: url("images/top-main-img02-sp.jpg");
 }
 .full a.img03 {
	background-image: url("images/top-main-img03-sp.jpg");
 }
 .full a.img04 {
	background-image: url("images/top-main-img04-sp.jpg");
 }
 .full a.img05 {
	background-image: url("images/top-main-img05-sp.jpg");
 }
 .full a.img06 {
	background-image: url("images/top-main-img06-sp.jpg");
 }
 

@media (min-width: 768px) {
	.full a.img01 {
		background-image: url("images/top-main-img01.jpg");
		 position: relative;
	 }
	 .full a.img02 {
		background: url("images/top-main-img02.jpg") left center no-repeat;
		 background-size: cover;
	 }
	 .full a.img03 {
		background: url("images/top-main-img03.jpg") center center no-repeat;
		 background-size: cover;
	 }
	 .full a.img04 {
		background-image: url("images/top-main-img04.jpg");
	 }
	 .full a.img05 {
		background-image: url("images/top-main-img05.jpg");
	 }
	 .full a.img06 {
		background-image: url("images/top-main-img06.jpg");
	 }
}

.full .slick-dots {
	bottom: 2%;
	z-index: +1;
}

/* hover時の色を変更 */
.full .slick-dots li button:hover:before,
.full .slick-dots li button:focus:before
{
    opacity: 1;
    color: #235A9F;
}

.full .slick-dots li button:before{
    font-family: 'slick';
    font-size: 13px;
    line-height: 35px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    /* 元のcontentプロパティの値だとfont-sizeを変更した際に位置がずれてしまうので値を変更 */
    /* content: '•'; */
    content: '●';
    text-align: center;
    opacity: .25;
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* active時の色を変更 */
.full .slick-dots li.slick-active button:before
	{
		opacity: .75;
		color: #235A9F;
	}


/* 商品 */
.top-items a {
	display: inline-block;
	color: #4C4948;
	font-weight: 700;
	border-bottom: 2px solid #fff;
	
}
.top-items a:hover{
	border-bottom: 2px solid #235A9F;
}

/* 封筒テンプレート */
.top-template {
	position: absolute;
	bottom: 230px;
	right: 2rem;
}
@media (min-width: 1025px) {
	.top-template {
		top: 17rem;
		right: 6rem;	
	}
}

a.btn-circle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.4;
	
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 0.5rem;

	padding-top: 30px;	
}
@media (min-width: 1025px) {
	a.btn-circle {
		padding-top: 37px;	
	}
}

a.btn-circle {
	width: 120px;
	height: calc(120px - 30px);
	border-radius: 50%;
	color:  #235A9F;
	border: 5px solid #235A9F;
	background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));
}
@media (min-width: 1025px) {
	a.btn-circle {
		width: 150px;
		height: calc(150px - 37px);
	
	}
}

a.btn-circle:hover {
	color:  #fff;
	border: 5px solid #fff;
	background: #235A9F;
}

a.btn-circle i {
	font-size: 170%;
}

.fa-position-bottom {
	position: absolute;
	bottom: 1.2rem;
	left: 0;
	right: 0;
	margin: auto;
}







/*メニュー*/
.top-bg-white {
	background: #fff;
	color: #4C4948;
	margin-left: auto;
	margin-right: auto;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 0px 3px 6px #00000029;
}
.top-bg-white h3 {
	font-size: 3rem;
}
.top-bg-white h4 {
	font-size: 1.8rem;
}
@media (min-width: 769px) {
	.top-bg-white h4 {
		font-size: 2.3rem;
	}
}
.top-bg-white p {
	font-size: 1.6rem;
}


.top-bg-white-col-2 {
	width: 85.6%;
	padding-left: 6%;
	padding-right: 6%;
}
.top-bg-white-col-4 {
	width: 83.4%;
	padding-left: 6%;
	padding-right: 6%;
}


/**/
.top-bg-white-pd-3p {
	padding-top: 3%;
	padding-bottom: 3%;
}
.top-bg-white-pd-4p {
	padding-top: 4%;
	padding-bottom: 4%;
}

.top-bg-white-pd-5p {
	padding-top: 5%;
	padding-bottom: 5%;
}
.top-bg-white-pd-5-5p {
	padding-top: 5.5%;
	padding-bottom: 5.5%;
}

.top-bg-white-pd-6p {
	padding-top: 6%;
	padding-bottom: 6%;
}

.top-bg-white-pd-7p {
	padding-top: 7%;
	padding-bottom: 7%;
}
.top-bg-white-pd-8p {
	padding-top: 8%;
	padding-bottom: 8%;
}



/* 内容 */
.img01-con {
	position: absolute;
	display: block;
	transform: translateX(-50%);
	top: 7vh;
	left: 50%;
}
.img01-con img {
	width: 96vw;
}
@media (min-width: 768px) {
	.img01-con {
		transform: translateX(0%);
		transform: translateY(-50%);
		top: 25%;
		left: 2%;
	}
	.img01-con img {
		width: 681px;
	}
}
@media (min-width: 900px) {
	.img01-con {
		left: 5%;
		top: 20%;
	}
	.img01-con img {
		width: 851px;
	}
}
@media (min-width: 1200px) {
	.img01-con {
		left: 5%;
		transform: translateY(-50%);
		top: 50%;
	}
	.img01-con img {
		width: 681px;
	}
}
@media (min-width: 1400px) {
	.img01-con img {
		width: 1022px;
	}
}


/* hero */

.hero-catch-top {
	position: absolute;
	width: 92%;
	height: auto;
	max-height: 30rem;
	/*transform: translateX(-50%);*/
	top: -20rem;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	
	
	padding: 4rem 5rem;
	background: rgba( 255, 255, 255, .8);
	color: #4C4948;
}
@media (min-width: 768px) {
	.hero-catch-top {
		top: 0;
		width: 70rem;	
		padding: 5rem;
	}
}



.hero-catch {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 5%;
	width: 92%;
	padding: 4rem 5rem;
	background: rgba( 255, 255, 255, .8);
	color: #4C4948;

	display: flex;
	justify-content: center;
}
@media (min-width: 768px) {
.hero-catch {
	left: 1.5%;
	transform: translateX(0%);
	width: 70%;	
	padding: 3rem 5rem;
	justify-content: flex-end;
}
}
@media (min-width: 1025px) {
.hero-catch {
	left: 2%;
	bottom: 6%;
	width: 65%;	
}
}
@media (min-width: 1200px) {
	.hero-catch {
		width: 45%;	
	}
}
@media (min-width: 1920px) {
.hero-catch {
	width: 40%;	
}
}

.hero-catch-con {
	display: flex;
	flex-direction: column;
	width: 100%;
}


.hero-catch-2 {
	display: none;
}
@media (min-width: 768px) {
	.hero-catch-2 {
		display: block;
		position: absolute;
		bottom: 5%;
		right: 2.5%;
	}
}


/* 米鉄バナー */
.hero-yonetetu {
	position: absolute;
	bottom: 36px;
	right: 50%;
	transform: translateX(92%);
}
@media (min-width: 768px) {
	.hero-yonetetu {
		top: 37.5rem;
		right: 1rem;
		transform: translateX(0%);
	}
}

.hero-yonetetu a[target="_blank"]::after {
	font-family: "";
	content: "";
	font-size: 0.8em;
    margin-left: 9px;
	margin-right: 9px;
	margin-top: 12px;
    font-weight: 700;
}


/* top-botom-menu */
.top-botom-menu  {
	height: 50rem;
}
@media (min-width: 768px) {
	.top-botom-menu  {
		height: 30rem;
	}
}
	
.top-botom-menu a {
	color: #fff;
}

.top-botom-menu-con {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #225B9F;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}
@media (min-width: 768px) {
	.top-botom-menu-con {
		border-top: 1px solid #fff;	
		border-bottom: none;
	}
}
.top-botom-menu-con:last-child {
}
@media (min-width: 768px) {
	.top-botom-menu-con:last-child {		
		border-top: 1px solid #fff;
		border-right: none;
	}
}

.top-botom-menu-con img {
	width: 55%;
}
@media (min-width: 768px) {
	.top-botom-menu-con img {
		width: 8.3rem;
	}
}


/* 見出し-SERVICES＆WORKS-背景青色+下矢印 */
.top-heading,.top-heading-2 {
	position: relative;	
	padding-top: 5rem;
	padding-bottom: 5rem;
}
@media (min-width: 768px) {
.top-heading,.top-heading-2 {
	padding-top: 6.5rem;
	padding-bottom: 6.5rem;
}
}
.top-heading::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -20px;
  border: 20px solid transparent;
  border-top: 20px solid #235A9F;
}
@media (min-width: 768px) {
.top-heading::before {
  margin-left: -40px;
  border: 40px solid transparent;
  border-top: 40px solid #235A9F;
}	
}

.top-heading-2::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -20px;
	border: 20px solid transparent;
	border-top: 20px solid #FEE100;
  }
  @media (min-width: 768px) {
  .top-heading-2::before {
	margin-left: -40px;
	border: 40px solid transparent;
	border-top: 40px solid #FEE100;
  }	
  }



.top-slider {
	max-width: 90%;  
	margin-right: auto;
    margin-left: auto;
}
@media (min-width:768px) {
	.top-slider {
        width: 94%;
    }
}

@media (min-width: 1025px) {
	.top-slider {
        width: 120rem;
    }
}


/* 新着情報 */
.news-list {
	width: 100%;
	margin: 1rem auto 5rem;
	border-bottom: dotted 2px #ccc;
}
  @media only screen and (min-width: 768px) {
    .news-list {
      width: 100%;
      margin: 3rem 0 5rem;
     }
}

.news-list li {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: dotted 2px #ccc;
}
.news-list li:last-child {
	border-bottom: none;
}
@media only screen and (min-width: 768px) {
.news-list li {
	padding-top: 0rem;
	padding-bottom: 0rem;
}
}

.news-list a {
	display: inline;
	color: #4C4948;
	
}
  @media only screen and (min-width: 768px) {
    .news-list a {
      display: flex;
	  }
}

@media only screen and (min-width: 768px) {
  .news-list a:hover {
    text-decoration: none;
	}
}
.day {
	text-align: left;
	font-size: 16px;
	color: #235A9F;
	font-weight: 700;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
@media only screen and (min-width: 768px) {
   .day {
	   text-align: center;
	   color: #4C4948;
	   font-weight: 400;

	   width: 22rem;
	   padding-top: 2rem;
	   padding-bottom: 2rem;
	   font-size: 20px;

	 }
}
.post-title {
	padding-top: .5rem;
	padding-bottom: .5rem;

	padding-left: 1.5rem;
	padding-right: 1.5rem;
	
	line-height: 1.5;
	font-size: 16px;
}
  @media only screen and (min-width: 768px) {
    .post-title {
		width: 100%;
		padding-top: 2.5rem;
		padding-bottom: 2rem;
		font-size: 20px;
	  }
}
.post-title-non {
	padding-top: .5rem;
	padding-bottom: .5rem;
	padding-left: .5rem;
	padding-right: .5rem;
	line-height: 1.5;
	font-size: 15px;
}
@media only screen and (min-width: 768px) {
    .post-title-non {
		width: 100%;
		padding-top: 2.5rem;
		padding-bottom: 2rem;
		font-size: 20px;
	  }
}
@media only screen and (min-width: 768px) {
  .news-list li:first-child .post-title {
}
}
@media only screen and (min-width: 768px) {
  .news-list li:last-child .post-title {
    background-image: none;
    border-bottom: none; }
}
.post-title:hover {
  color: #235A9F;
}

/* top-sns-area */
.top-sns {
	background: url("images/top-sns-img-sp.jpg") no-repeat top center,#fff;
	background-size: cover;
	height: 80rem;
}
@media only screen and (min-width: 540px) {
	.top-sns {
		height: 100rem;
	}
	}
@media only screen and (min-width: 768px) {
.top-sns {
	background: url("images/top-sns-img-bk.png") no-repeat center center, -moz-linear-gradient(left, #f7f7f7  0%, #F4F4F4 100%);
	background: url("images/top-sns-img-bk.png") no-repeat center center,#f7f7f7 -webkit-linear-gradient(left, #F3F3F3 0%, #f7f7f7 100%);
	background-size: contain;
	height: 57rem;
}
}

.top-sns-con {
	justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
	.top-sns-con {
		justify-content: center;
	}
}

.top-sns-con-in {
	margin-bottom: 5rem;
}
@media only screen and (min-width: 768px) {
	.top-sns-con-in {
		margin-bottom: 0;
	}
}


.top-sns-heading {
	font-size: 2.25rem;
	line-height: 1.7;
	font-weight: 500;
	text-align: center;
}
@media only screen and (min-width: 768px) {
.top-sns-heading {
	font-size: 2.4rem;
	text-align: left;
}
}


.top-yonetani-know {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url("images/strength/sp_elephant_01.jpg");
	height: 78rem;
}
@media (min-width: 768px) {
.top-yonetani-know {
	background: url("images/top-elephant-img.png") no-repeat center;
	background-size: cover;
	height: 57rem;
}
}
/* top-menu */
.top-memu-border {
	border-top: 2px dotted #ccc;
}
svg line,
svg polyline {
  fill: none;
}
.line1 {
  stroke: #FFFDFD;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 1, 20;
  stroke-dashoffset: 28;
}

.top-memu-border-2 {
	border-top: 8px dotted #FFFDFD;
}
.blog-archive-border {
	border-bottom: 2px dotted #ccc;
}
.top-menu-area {
	padding-top: 5rem;
	padding-bottom: 5rem;
}
@media (min-width: 768px) {
	.top-menu-area {
		padding-top: 7rem;
		padding-bottom: 7rem;
	}
}
/* ----------------------------------------------------------------------
 サブページ共通
---------------------------------------------------------------------- */
.wrapper {
    overflow: hidden;
    width: 100%;
    padding-top: 8rem;
}
@media (min-width: 1025px) {
    .wrapper{
        padding-top: 11rem;
    }
}

.pankuzu {
	margin-top: 2rem;
	margin-bottom: 2.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size: 13px;
}
@media (min-width: 1025px) {
.pankuzu {
	margin-bottom: 5rem;
	font-size: 14px;
}
}
.pankuzu a {
	color: #4C4948;
}
.pankuzu a.pankuzu-web {
	color: #fff;
}

.sub-img{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
    width: 100%;
    height: 200px;
}
@media (min-width: 1025px) {
	.sub-img{
        height: 300px;
    }
}

.sub-img-items {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
    width: 100%;
    height: 160px;
}
@media (min-width: 1025px) {
	.sub-img-items {
        height: 260px;
    }
}


.sub-img h1,.sub-img-items h1 {
	font-size: 3rem;
	line-height: 1.7;
	font-weight: 500;
	text-shadow: 0px 2px 6px #666;
	letter-spacing: .15em;
	color: #fff;
}
@media (min-width: 1025px) {
	.sub-img h1,.sub-img-items h1 {
		font-size: 5rem;
    }
}

.futo-sub-bg h2 {
	font-size: 3rem;
	line-height: 1.7;
	font-weight: 500;
	text-shadow: none;
	color: #4C4948;
	letter-spacing: .15em;
	/*color: #215B9F;*/
}
@media (min-width: 1025px) {
	.futo-sub-bg h2 {
		font-size: 5rem;
    }
}
/*
.animation-sub-bg h2 {
	font-size: 3rem;
	line-height: 1.7;
	font-weight: 500;
	text-shadow: none;
	color: #215B9F;
	letter-spacing: .15em;
}
@media (min-width: 1025px) {
	.animation-sub-bg h2 {
		font-size: 5rem;
    }
}
*/


/* 背景画像 */
.business-sub-bg{
    background: url(images/business-main.jpg) center center;
	background-size: cover;
}
.guidelines-sub-bg{
    background: url(images/guidelines-main.jpg) center center;
	background-size: cover;
}
.enterprise-sub-bg{
    background: url(images/enterprise-main.jpg) center right;
	background-size: cover;
}
.printing-sub-bg{
    background: url(images/printing-main.jpg) center center;
	background-size: cover;
}
.printing-ondemand-sub-bg{
    background: url(images/printing-ondemand-main.jpg) center center;
	background-size: cover;
}
.printing-bookbinding-sub-bg{
    background: url(images/printing-bookbinding-main.jpg) center center;
	background-size: cover;
}
.futo-sub-bg{
    background: url(images/futo-main.jpg) center center;
	background-size: cover;
}
.design-sub-bg{
    background: url(images/design-main.jpg) center center;
	background-size: cover;
}
.design-exhibition-sub-bg{
    background: url(images/design-exhibition-main.jpg) center center;
	background-size: cover;
}
.design-storesign-sub-bg{
    background: url(images/design-storesign-main.jpg) center center;
	background-size: cover;
}

.web-sub-bg{
    background: url(images/web-main.jpg) center center;
	background-size: cover;
}
.animation-sub-bg{
    background: url(images/animation-main.jpg) center center;
	background-size: cover;
}

.planning-sub-bg{
    background: url(images/planning-main.jpg) center center;
	background-size: cover;
}

.rental-sub-bg{
    background: url(images/company-main.jpg) center center;
	background-size: cover;
}

.equipment-sub-bg{
    background: url(images/equipment-main.jpg) center center;
	background-size: cover;
}
.company-sub-bg{
    background: url(images/company-main.jpg) center center;
	background-size: cover;
}
.recruit-sub-bg{
    background: url(images/recruit-main.jpg) center center;
	background-size: cover;
}
.faq-sub-bg{
    background: url(images/faq-main.jpg) center center;
	background-size: cover;
}
.contact-sub-bg{
    background: url(images/contact-main.jpg) center center;
	background-size: cover;
}
.news-sub-bg{
    background: url(images/news-main.jpg) center left;
	background-size: cover;
}
.production-sub-bg{
    background: url(images/production-main.jpg) center center;
	background-size: cover;
}
.items-sub-bg{
    background: url(images/items-main.jpg) center center;
	background-size: cover;
}
.download-sub-bg{
    background: url(images/download-main.jpg) center center;
	background-size: cover;
}
.fsc-sub-bg{
    background: url(images/fsc-main.jpg) center center;
	background-size: cover;
}

/* ----------------------------------------------------------------------
 strength
---------------------------------------------------------------------- */
.strength-hero {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url("images/strength/top_img_01_bk.jpg");
	height: calc(100vh - 6.5rem);
	padding-top: 6.5rem;
	overflow: hidden;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
@media (min-width: 1025px) {
	.strength-hero {
		height: calc(100vh - 10rem);
		padding-top: 10rem;		
}
}


.strength-hero-con {
	position: relative;
}
/* scroll */
a.strength-scroll {
  position: absolute;
  bottom: 10rem;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  text-decoration: none;
	color: #111;
}
a.strength-scroll span {
  position: absolute;
  top: 3rem;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #111;
  border-bottom: 1px solid #111;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}



.strength-contents {
	max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;	
	margin-right: auto;
    margin-left: auto;
}
@media (min-width:768px) {
	.strength-contents{
        width: 94%;
    }
}

@media (min-width: 1025px) {
	.strength-contents{
        width: 120rem;		
    }
}

@media (min-width: 1500px) {
	.strength-contents{
        width: 150rem;		
    }
}


.elephant01 {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url("images/strength/sp_elephant_01.jpg");
	height: 100vh;
}
@media (min-width: 768px) {
.elephant01 {	
	background-position: center center;
}
}
@media (min-width: 1025px) {
.elephant01 {
	background-image: url("images/strength/elephant_01.jpg");
	background-position: top left;
}
}

.elephant01-con {
	display: flex;
	align-items: center;
}

.elephant01-con-in {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;	
	width: 100%;
}
@media (min-width: 768px) {
	.elephant01-con-in {
		
	}
}
@media (min-width: 1025px) {
	.elephant01-con-in {
		width: 56%;
	}
}



/* 黄色背景 */
.elephant02 {
	background: #FFC701;
	height: 70vh;	
	display: flex;
	align-items: center;
	padding-top: 5vh;
	padding-bottom: 5vh;
	overflow: hidden;
	
}
@media (min-width: 768px) {
	.elephant02 {
		height: 100vh;
	}
}
@media (min-width: 1921px) {
	.elephant02 {
		height: 90vh;
	}
}


.elephant02-con {	
	height: 53vh;
	width: 100%;
}
@media (min-width: 768px) {
	.elephant02-con {
		position: relative;
		height: 80vh;
	}
}
@media (min-width: 1025px) {
	.elephant02-con {
		height: 94vh;
	}
}
@media (min-width: 1500px) {
	.elephant02-con {
		height: 85vh;
	}
}
@media (min-width: 1921px) {
	.elephant02-con {
		height: 60vh;
	}

}


.buruburu {
    display: inline-block;
    animation: furueru 3s infinite;
    animation-iteration-count: 20;
}

@keyframes furueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(5px, 20px) rotateZ(0deg)}
    50% {transform: translate(0px, 0px) rotateZ(0deg)}
    75% {transform: translate(20px, 20px) rotateZ(-5deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

#elephant02-a {
	
}
@media (min-width: 768px) {
	#elephant02-a {
		position: absolute;		
		z-index: 2;
		top: 0;
		left: 0;
	}
}
@media (min-width: 1025px) {
	#elephant02-a {

	}
}

@media (max-width: 768px) {
#elephant02-a img {
	width: 95%;
}
}

#elephant02-b {
	
}
@media (min-width: 768px) {
	#elephant02-b {
		position: absolute;
		z-index: 1;
		bottom: -2rem;
		right: 0;		
	}
}
@media (min-width: 1025px) {
	#elephant02-b {

	}
}

#elephant02-b img {
	
}
@media (min-width: 1500px) {
	#elephant02-b img {
		width: 900px;
	}
}
@media (min-width: 2000px) {
	#elephant02-b img {
		width: 1000px;
	}
}

.s-link {
	position: relative;
	display: flex;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	
	height: 56rem;
}
@media only screen and (min-width: 768px) {
	.s-link {
		height: 60rem;;
	}				
}
@media only screen and (min-width: 1025px) {
	.s-link {
		height: 70rem;
	}				
}

.s-content {
	box-sizing: border-box;
	overflow: hidden;
	
	background: rgba(0, 0, 0, 0);
	padding: 5rem;
	width: 100%;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
	
@media only screen and (min-width: 768px) {
	 .s-content {
		background: #235974;
 		padding: 0;
		width: 44.2rem;
	}
}



.s-cacth {
	position: absolute;
	top: calc(50% - 17rem);
	
	width: 22rem;
	height: 22rem;
	opacity: 0.2;
}
@media only screen and (min-width: 768px) {
.s-cacth {
	top: 0%;
	margin-top: -.26rem;
	
	width: 25rem;
	height: 25rem;
	opacity: 0;
	
	-webkit-transition: opacity 0.4s cubic-bezier(0.25,.46,0.45,.94), visibility 0.4s cubic-bezier(0.25,.46,0.45,.94);
	transition: opacity 0.4s cubic-bezier(0.25,.46,0.45,.94), visibility 0.4s cubic-bezier(0.25,.46,0.45,.94);
}
}


.s-cacth-l {
	left: 50%;
	transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
.s-cacth-l {
	left: 0%;
	transform: translateX(0);
	margin-left: -1rem;
}
}

.s-cacth-r {
	right: 50%;
	transform: translateX(50%);
}
@media only screen and (min-width: 768px) {
.s-cacth-r {
	right: 0%;
	transform: translateX(0);
	margin-right: -1rem;
}
}


.s-link:hover .s-cacth {
	opacity: .2;
	visibility: visible;
}




.s-header {
	z-index: 2;	
	text-align: left;
}

@media only screen and (min-width: 768px) {
	.s-header {
		position: absolute;
		bottom: 8rem;
	}
}

@media only screen and (min-width: 768px) {
	.s-header-l {
		left: 10rem;
		margin-right: 10rem;
	}
}
@media only screen and (min-width: 768px) {
	.s-header-r {
		right: 10rem;
		margin-left: 10rem;
	}
}


.s-title {
	font-size: 5.8vw;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
@media only screen and (min-width: 768px) {
    .s-title {
		text-align: left;
		font-size: 6rem;
		z-index: 33;		
	}
}
.s-title span {
	white-space: nowrap;
}
	
.s-tag {
	font-size: 1.8rem;
}
@media only screen and (min-width: 768px) {
	.s-tag {
		font-size: 2rem;
	}
}


	
	
.s-img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -999;
}

@media only screen and (min-width: 768px) {
	.s-img {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;			
		position: relative;
	}
}
.s-img-01 {
	background: url('./images/strength/img_print_01.jpg') 50% 50% no-repeat;
	background-size: cover;
}
.s-img-02 {
	background: url('./images/strength/img_futo_01.jpg') 50% 50% no-repeat;
	background-size: cover;
}
.s-img-03 {
	background: url('./images/strength/img_character_01.jpg') 50% 50% no-repeat;
	background-size: cover;
}
.s-img-04 {
	background: url('./images/strength/img_environment_01.jpg') 50% 50% no-repeat;
	background-size: cover;
}

.s-link:hover .s-img:before {
	opacity: 0;
}
	
	.s-img:before {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgb(0, 0, 0);
		opacity: .5;
		-webkit-transition: opacity 0.4s cubic-bezier(0.25,.46,0.45,.94);
		transition: opacity 0.4s cubic-bezier(0.25,.46,0.45,.94);
		top: 0;
		left: 0
	}
	
	
	
	


























/* ----------------------------------------------------------------------
 company
---------------------------------------------------------------------- */
/*tb-type-03*/
.tb-type-03 {
	table-layout: auto;
	width: 100%;
	min-width: 100%;
	border-collapse: collapse;
	border-top: none;
    border-bottom: none;
}
@media only screen and (min-width: 768px) {
.tb-type-03 {
	table-layout: fixed;
	border-top: 2px solid #235A9F;
    border-bottom: 2px solid #235A9F;
}
}
.tb-type-03 tr {
    border-top: none;
    border-bottom: none;
}
@media only screen and (min-width: 768px) {
	.tb-type-03 tr {
    	border-top: 1px solid #235A9F;
    	border-bottom: 1px solid #235A9F;
	}
}
.tb-type-03 th {
	display: block;
	vertical-align: middle;
	text-align: center;
	font-weight: 700;
	color: #235A9F;
	background: #e7f3fb;	
	width: 100%;
	font-size: 15px;
	padding: 5px 0px;
}
@media only screen and (min-width: 768px) {
.tb-type-03 th {
	display: table-cell;
	width: 25%;
	font-size: 18px;
	padding: 20px 10px;
}
}
.tb-type-03 td {
	display: block;
	font-size: 15px;
	line-height: 2;
	padding: 10px 10px 30px 30px;
	text-align: left;
	vertical-align: middle;	
}
@media only screen and (min-width: 768px) {
.tb-type-03 td {
	font-size: 18px;
	padding: 20px 10px 20px 50px;
}
}


/* 沿革 */
.timeline {
	list-style: none;
	margin-top: 2rem;
	margin-bottom: 9rem;
}
@media ( min-width : 768px ) {
	.timeline {
		margin: 5rem 0 9rem;
	}
}

.timeline > li {
  margin-bottom: 2rem;
}
@media ( min-width : 768px ) {
	.timeline > li {
		position: relative;
		display: flex;
		overflow: hidden;
		margin: 0;
	 }
}


.timeline-date {
	width: 100%;
	color: #225B9F;
	font-weight: 700;
	line-height: 3rem;
}
@media ( min-width : 768px ) {
  .timeline-date {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	width: 15%;
	padding-left:2rem;
	line-height: 7rem;
  }
}


.timeline-content {	
	width: 100%;   
    padding-left: 0rem;
	line-height: 3rem;
	
}
@media ( min-width : 768px ) {
  .timeline-content {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  width: 80%;
	  padding-left: 3.5%;
	  border-left: 2px #e7f3fb solid;
	  line-height: 7rem;
  }
}
@media ( min-width : 1025px ) {
  .timeline-content {
	width: 80%;
    padding-left: 5%;
  }
}


/* 丸 */
.timeline-content:before {
    content: '';
    width: 0;
    height: 0;
    background: #225B9F;
    position: absolute;
    left: 16.5%;
    top: 50%;
	transform: translateY(-50%);
	border-radius: 100%;
}
@media ( min-width : 768px ) {
	.timeline-content:before {
	    width: 12px;
	    height: 12px;
		left: 16.1%;		
	}
}
@media ( min-width : 1025px ) {
	.timeline-content:before {
		left: 16%;		
	}
}

/* ----------------------------------------------------------------------
 president
---------------------------------------------------------------------- */
/* sub-page */
.col-2-president-l,.col-2-president-r {
    width: 100%;
}
@media (min-width:768px) {
.col-2-president-l {
    width: 30%;
}
.col-2-president-r {
    width: 65%;
	line-height: 2.5;
}
}

/* ----------------------------------------------------------------------
 faq
---------------------------------------------------------------------- */
.accordionbox{
	width: 100%;
	margin: 3rem auto 10rem;
}
/* 質問 */
.accordionlist dt{
    display: flex;
    align-items: center;
    /*background: #e7f3fb;*/
	border-bottom: 2px solid #235A9F;
    margin: 2rem 0 2rem;
    padding: 0;
	cursor: pointer;
}
@media screen and (min-width: 768px) {
	.accordionlist dt{
		border-bottom: 2px solid #235A9F;
	}
}

.accordionlist dt .title{
    padding-left: 1rem;
}

/* 回答 */
.accordionlist dd{
    display: none;
	/*background: #e7f3fb;*/
	/*border: 2px solid #235A9F;*/
	color: #235A9F;;
	padding: 1rem;
}
@media screen and (min-width: 768px) {
	.accordionlist dd{
		padding: 1rem 1rem 1rem 3rem;
	}
}

/* ＋ */
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
    padding: 0 1rem;    
}
@media screen and (min-width: 768px) {
	.accordion_icon,
	.accordion_icon span {
		padding: 0 1.5rem;    
	}
}
.accordion_icon {
	position: relative;
	width: 50px;
    text-align: center;
    margin-left: auto;
    margin-right: 2rem;
}
@media screen and (min-width: 768px) {
	.accordion_icon {
		margin-right: 4rem;
	}	
}
.accordion_icon span {
	position: absolute;
    width: 15px;
    right: 5px;
	height: 2px;
    background-color: #235A9F; /* ＋の色 */
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 0px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 0px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion_icon.active span:nth-of-type(2) {
	top: 0px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

/* Q&A画像 */
.question{
	background: url("images/faq-q.png") 1.5rem center no-repeat;
    background-size: 25px;
	padding: 1.5rem 0rem 1.5rem 6rem;
    color: #235A9F;
    font-size: 16px;
	font-weight: 500;
    line-height: 1.8;	
}
@media screen and (min-width: 768px) {
	.question{
		background: url("images/faq-q.png") 4rem center no-repeat;
		background-size: 35px;
		padding: 1.5rem 3rem 1.5rem 11rem;
		font-size: 25px;
	}
}

.answer{
	/*background: url("../images/faq-a.png") 0 center no-repeat;*/
    background-size: 25px;
	padding: 1rem 0 1rem .8rem;
    font-size: 14px;
    line-height: 1.8;
}
@media screen and (min-width: 768px) {
	.answer{
		background: url("images/faq-a.png") 2rem center no-repeat;
		background-size: 35px;
		padding: 3rem 3rem 3rem 9rem;
		font-size: 18px;
	}
}

/* ----------------------------------------------------------------------
 SEO
---------------------------------------------------------------------- */
.col-3-search {
    width: 100%;
}
@media (min-width:1025px) {
	.col-3-search {
		width: 31.5%;
	}
}

.col-4-search {
    width: 100%;
}
@media (min-width:1025px) {
	.col-4-search {
		width: 22.9375%;
	}
}

/* 検索ボックス全体（リンク） */
.search-box {
	display: flex;                 /* 横並びレイアウト */
	align-items: center;           /* 垂直方向の中央揃え */
	min-width: 280px;
	width: 100%;                   /* 横幅100% */
	border: 2px solid #000;        /* 枠線 */
	text-decoration: none;         /* リンクの下線を消す */
	color: inherit;                /* テキストカラー継承 */
	padding: 6px 10px;
	box-sizing: border-box;        /* パディング込みでサイズ指定 */
	transition: background-color 0.2s;
  }
  
  /* 検索キーワード部分：残りの幅を占める */
  .search-keyword {
	flex: 1;
	font-size: 18px;
	font-weight: 600;
	color: #4C4948;
  }
  
  /* 検索アイコン部分 */
  .search-button {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #007BFF;     /* アイコン背景色 */
	color: #fff;                   /* アイコンの色 */
	width: 32px;                   /* 固定サイズ */
	height: 32px;                  /* 固定サイズ */
	margin-left: 8px;              /* テキストとの間隔 */
	cursor: pointer;
	transition: background-color 0.2s;
  }
  
  /* ホバー時の色変更 */
  .search-box:hover .search-button {
	background-color: #0056b3;
  }


/* ----------------------------------------------------------------------
 link
---------------------------------------------------------------------- */
.link-area a {
	color: #235A9F;
}



/* ----------------------------------------------------------------------
 printing
---------------------------------------------------------------------- */

.bg-printing div {
  background-repeat: no-repeat;
  background-position: center;
  height: 20rem;
}
@media only screen and (min-width: 768px) {
	.bg-printing div {
		height: 60rem;
	}
}
.bg-printing .printing-01 {
	background: url("images/printing-img01.jpg") center center no-repeat;
	background-size: cover;
}
.bg-printing .printing-02 {
	background: url("images/printing-img02.jpg") center center no-repeat;
	background-size: cover;
}
.bg-printing .printing-03 {
	background: url("images/printing-img03.jpg") center center no-repeat;
	background-size: cover;
}

.bg-printing .bookbinding-01 {
	background: url("images/printing-img07.jpg") center center no-repeat;
	background-size: cover;
}
.bg-printing .bookbinding-02 {
	background: url("images/printing-img08.jpg") center center no-repeat;
	background-size: cover;
}



/* ----------------------------------------------------------------------
 printing-offset
---------------------------------------------------------------------- */
.printing-flow {
		width: 70%;
		border: 2px solid #4C4948;
		padding: .5rem;
		font-size: 2rem;
		font-weight: 700;
		text-align: center;
		background: none;
		margin-left: auto;
		margin-right: auto;
}
@media only screen and (min-width: 768px) {
	.printing-flow {
		font-size: 2.8rem;
}
}
/*
.printing-flow:hover {
	transition: all .2s;	
	background: #FFD800;
}*/

.triangle {
	display: block;
	width: 1px;
	height: 1px;
	border-top: 15px solid #ddd;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
	.triangle {
		border-top: 30px solid #ddd;
		border-right: 30px solid transparent;
		border-left: 30px solid transparent;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3.5rem;
		margin-bottom: 3.5rem;
}
}
/* 正方形 */
.printing-bnr-a {
	border: 4px solid #000;
	padding: 3rem 0;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	background: none;
	margin-left: auto;
	margin-right: auto;
	color: #000;
}
@media only screen and (min-width: 768px) {
.printing-bnr-a {
	border: 6px solid #000;
	padding: 8rem 0;
	font-size: 2.5rem;
}
}
.printing-bnr-hv01:hover {
	transition: all .2s;	
	background: #D8D8D8;
}
.printing-bnr-hv02:hover {
	transition: all .2s;	
	background: #FF0080;
}


/* 長方形 */
.printing-bnr-b {
	position: relative;
	background: none;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	padding: 6rem;
}

.printing-icon-arrow {
	display: none;
}
@media only screen and (min-width: 768px) {
	.printing-icon-arrow {
		display: block;
		position: absolute;
		top: 50%;
		right: 5%;
		transform: translateY(-50%);
		width: 40px;
	}
}
@media only screen and (min-width: 1025px) {
	.printing-icon-arrow {
		width: 55px;
	}
}

.printing-bnr-hv03 {
	background: #1772BF;
}
.printing-bnr-hv03:hover {
	transition: all .2s;	
	background: rgba(23,114,191,.7);/* #1772BF */
}

.printing-bnr-hv04 {
	background: rgba(23,114,191,.7);/* #1772BF */
}
.printing-bnr-hv04:hover {
	transition: all .2s;	
	background: #1772BF;
}



/* ----------------------------------------------------------------------
 printing-monochrome
---------------------------------------------------------------------- */

.video-wrap {
	position: relative;
	overflow: hidden;
	height: 25rem;
	margin-top: 8rem;	
}

@media only screen and (min-width: 768px) {
	.video-wrap {
		height: 40rem;
		margin-top: 12rem;	
	}
}
@media only screen and (min-width: 1025px) {
	.video-wrap {
		height: 60rem;
		margin-top: 15rem;	
	}
}


video.printing-monochrome {
	display: none;
}
@media only screen and (min-width: 768px) {
	video.printing-monochrome {
		display: block;
		position: absolute;
		bottom: 0rem;
		width: 100%;
		margin: 0;
	}	
}
@media only screen and (min-width: 1025px) {
	video.printing-monochrome {
		bottom: -5rem;
	}	
}

img.printing-monochrome-sp {
	display: inline-block;
}
@media only screen and (min-width: 768px) {
	img.printing-monochrome-sp {
		display: none;
	}
}

/* ----------------------------------------------------------------------
 futo
---------------------------------------------------------------------- */
	 .bg-futo .slick-dots li button:before{
		font-family: 'slick';
		font-size: 13px;
		line-height: 30px;
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 10px;
		/* 元のcontentプロパティの値だとfont-sizeを変更した際に位置がずれてしまうので値を変更 */
		/* content: '•'; */
		content: '●';
		text-align: center;
		opacity: .25;
		color: #235A9F;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	/* active時の色を変更 */
	.bg-futo .slick-dots li.slick-active button:before
		{
			opacity: .75;
			color: #235A9F;
		}

	.futo-movie {
		background: -moz-linear-gradient(bottom,  rgba(34,91,159,1) 0%, rgba(34,91,159,1) 80%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 80%);
		background: -webkit-linear-gradient(bottom,  rgba(34,91,159,1) 0%,rgba(34,91,159,1) 80%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 80%);
		background: linear-gradient(to top,  rgba(34,91,159,1) 0%,rgba(34,91,159,1) 80%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 80%);
	}










/* ----------------------------------------------------------------------
 yumail
---------------------------------------------------------------------- */
.yumail-label {
	position: relative;
	display: inline-block;
	padding: 5px 8px 5px 12px;
	min-width: 120px;
	max-width: 100%;
	color: #fff;
	font-size: 13px;
	background: #235A9F;
	letter-spacing: .2em;
	margin-top: 15px;
}

@media only screen and (min-width: 1024px) {
	.yumail-label {
		font-size: 25px;
		margin-top: 0px;
	}
}

.yumail-label::before {
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-bottom: 15px solid #235A9F;
}



.yumail-template-area {
  border: 2px solid #b94433;
  padding: 3rem;
}
  @media only screen and (min-width: 768px) {
    .yumail-template-area {
      padding: 5rem;
	  }
}

.yumail-bk {
	background: #F16D95;
	text-align: center;
	min-height: 23rem;
	margin-top: 10.5rem;
}
@media only screen and (min-width: 768px) {
	.yumail-bk {
		min-height: 46rem;
		height: 36vh;
		margin-top: 9rem;
	}
}
@media only screen and (min-width: 1025px) {
	.yumail-bk {
		height: 48rem;
		margin-top: 9rem;
	}
}

.yumail-bk img {
	margin-top: -6rem;
}
@media only screen and (min-width: 768px) {
	.yumail-bk img {
		margin-top: -12rem;
	}
}

/* ----------------------------------------------------------------------
 yumail-character
---------------------------------------------------------------------- */

.col-2-l-30 {
    width: 100%;
}
@media (min-width:768px) {
	.col-2-l-30 {
		width: 30%;
	}
}

.col-2-r-70 {
    width: 100%;
}
@media (min-width:768px) {
	.col-2-r-70  {
		width: 68%;
	}
}

.yumail-chara-copy {
	position: relative;
	height: 37rem;
}
@media (min-width:768px) {
	.yumail-chara-copy {
		height: 100%;
	}
}

.yumail-chara-text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	top: 58%;
	width: 100%;
}
@media (min-width:768px) {
.yumail-chara-text {	
	top: 85%;
	width: 65rem;
}
}


.yumail-chara-heading {
	display: flex;
	align-items: center;	
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-size: 2.2rem;
	font-weight: 500;
	margin-bottom: 0;	
}
@media (min-width: 1025px) {
	.yumail-chara-heading {
		width: 80%;
		font-size: 3rem;
		margin-bottom: -4.5rem;
}
}


.yumail-chara-heading::after {
	border-top: 1px dashed;
	content: "";
	flex-grow: 1;
	margin-left: 1rem;
}
@media (min-width: 1025px) {
	.yumail-chara-heading::after {
		border-top: 2px dashed;
	}
}

/* ----------------------------------------------------------------------
 design-referencebook
---------------------------------------------------------------------- */
.design-flow {
		width: 50%;
		border: 2px solid #4C4948;
		padding: .5rem;
		font-size: 2rem;
		font-weight: 700;
		text-align: center;
		background: none;
		margin-left: auto;
		margin-right: auto;
}
@media only screen and (min-width: 768px) {
	.design-flow {
		font-size: 2.8rem;
}
}


/* ----------------------------------------------------------------------
 web
---------------------------------------------------------------------- */
/* web ページフッター付近のメニューで使用 左右パディングあり */
.bg-web {
	background: transparent linear-gradient(252deg, #EEFA60 0%, #0583C9 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 8px 12px #E4E4E4;	
	padding: 5rem 3rem;
	width: 100%;
	box-sizing:border-box;
}
@media (min-width: 1025px) {
	.bg-web {
		padding: 3.5rem 4rem;
	}
}
/* web ページのパンくずがあるエリアの背景で使用 左右パディングなし */
.bg-web-2 {
	background: transparent linear-gradient(252deg, #EEFA60 0%, #0583C9 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 8px 12px #E4E4E4;
	padding: 5rem 0rem;
	width: 100%;
	box-sizing:border-box;
}
@media (min-width: 1025px) {
	.bg-web-2 {
		padding: 3.5rem 0rem;
	}
}










.mt-web {
	margin-top: 0rem;
}
@media screen and (min-width: 768px) {
	.mt-web {
		margin-top: -6rem;
	}
}

@media screen and (min-width: 768px) {
	.web-menu {
		position: relative;
		display: flex;
	  	flex-wrap: wrap;
	  	justify-content: space-between;
		align-items: flex-end;		
		margin: 0 auto;
	}
}

.web-menu-item {
	margin: 6rem 0 0;
	background: transparent linear-gradient(252deg, #EEFA60 0%, #0583C9 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 8px 12px #E4E4E4;
	padding: 0rem 2.5rem 5rem;
}
@media screen and (min-width: 768px) {
.web-menu-item {
	position: relative;
	background: none;
	box-shadow: none;
	width: 100%;
    margin: 15rem 0 0;
  }
}

.web-menu-link {
    transition: 2.0s;
}


.web-menu-photo {
	position: relative;
	display: block;
    margin: 0 -10px 0 -20px;
}
@media screen and (min-width: 768px) {
	.web-menu-photo {
		position: absolute;
		top: -8rem;
		margin-right: -3rem;
		z-index: 3;
		width: 300px;
	  }
}
@media screen and (min-width: 1025px) {
	.web-menu-photo {
		margin-right: 0;
		width: 380px;
	  }
}


@media screen and (min-width: 768px) {
	.web-menu-item-2 .web-menu-photo {
		right: 0;
		top: auto;
		bottom: -40px;   
	  }
}



.web-menu-photo img {
	position: relative;
    z-index: 2;
	padding: 0 2rem;
	width: 94%;  
  }
  @media screen and (min-width: 768px) {
	.web-menu-photo img {
		width: 250px;
		transition: 1.0s;
		transform: scale(1);
	  }
	}
	@media screen and (min-width: 1025px) {
		.web-menu-photo img {
			width: 370px;
		  }
		}
/*背景白枠*/
@media screen and (max-width: 767px) {
.web-menu-photo::after {
    content: "";
    position: absolute;
    background: #fff;
    z-index: 1;
    width: 110%;
    height: 60%;
    top: -1rem;
    left: -1rem;
}
}
@media screen and (min-width: 768px) {
.web-menu-link:hover .web-menu-photo img {
        transform: scale(1.05);
  }
}


@media screen and (min-width: 768px) {
.web-menu-txtwrap {
	position: relative;
	width: 58%;
	
	padding: 7rem 4rem 7rem 20rem;
    float: right;
    transition: 1.0s;
    transition-delay: 1.0s;
  }
}
@media screen and (min-width: 1025px) {
	.web-menu-txtwrap {
		width: 700px;
	  }
}

@media screen and (min-width: 768px) {
.web-menu-txtwrap::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transition: 1.0s;
    background: transparent linear-gradient(252deg, #EEFA60 0%, #0583C9 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 8px 12px #E4E4E4;
  }
  .web-menu-txtwrap::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    background: transparent linear-gradient(252deg, #EEFA60 0%, #0583C9 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 8px 12px #E4E4E4;
  }
}

	  

@media screen and (min-width: 768px) {	
	.web-menu-item-2 .web-menu-txtwrap {		
		float: left;
		padding: 7rem 20rem 7rem 4rem;
		transition-delay: 1.0s;
	  }
	  .web-menu-item-2 .web-menu-txtwrap::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		-webkit-transition: 1.0s;
		transition: 1.0s;
		background: transparent linear-gradient(252deg, #EEFA60 0%, #0583C9 100%) 0% 0% no-repeat padding-box;
		box-shadow: 0px 8px 12px #E4E4E4;
	  }
	  .web-menu-item-2 .web-menu-txtwrap::after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -2;
		top: 0;
		left: 0;
		background: transparent linear-gradient(252deg, #EEFA60 0%, #0583C9 100%) 0% 0% no-repeat padding-box;
		box-shadow: 0px 8px 12px #E4E4E4;
	  }
	
}




/* サブページメニュー */

.web-menu-item-sub {
	margin: 6rem 0 0;
	background: transparent linear-gradient(252deg, #EEFA60 0%, #0583C9 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 8px 12px #E4E4E4;
	padding: 0rem 2.5rem 5rem;
}
@media screen and (min-width: 768px) {
.web-menu-item-sub {
	position: relative;
	width: 90%;
    margin: 15rem 0 0;
  }
}
.web-menu-photo-sub {
	position: relative;
	display: block;
    margin: 0 -5px 0 -25px;
}

.web-menu-photo-sub img {
	position: relative;
    z-index: 2;
	padding: 0 2.8rem;
	width: 94%;  
  }
  @media screen and (min-width: 768px) {
	.web-menu-photo-sub img {
		padding: 0 2.3rem;
	  }
  }
/*背景白枠*/

.web-menu-photo-sub::after {
    content: "";
    position: absolute;
    background: #fff;
    z-index: 1;
    width: 110%;
    height: 60%;
    top: -1rem;
    left: -1rem;
}










.web-text {
	width: 100%;
}
@media (min-width: 768px) {
	.web-text {
		width: 66%;
	}
}
.web-icon {
}
@media (min-width: 768px) {
	.web-icon {
		position: absolute;
		bottom: -60px;
		right: -50px;
		display: flex;
		justify-content: center;
	}
}
@media (min-width: 1025px) {
	.web-icon {
		position: absolute;
		bottom: -80px;
		right: -3%;
	}
}
.web-icon-img {
	width: 100%;
}
@media (min-width: 768px) {
	.web-icon-img {
		width: 60%;
	}
}
@media (min-width: 1025px) {
	.web-icon-img {
		width: 80%;
	}
}


/* ----------------------------------------------------------------------
 web-newsite
---------------------------------------------------------------------- */
.bg-web-newsite {
	height: 15rem;
}
@media only screen and (min-width: 768px) {
	.bg-web-newsite {
		height: 50rem;
	}
}

.bg-web-newsite-01 {
	background: url("images/web-newsite-sub-img01.jpg") center bottom no-repeat;
	background-size: cover;
}
.bg-web-newsite-02 {
	background: url("images/web-newsite-sub-img02.jpg") center bottom no-repeat;
	background-size: cover;
}
.bg-web-newsite-03 {
	background: url("images/web-newsite-sub-img03.jpg") center bottom no-repeat;
	background-size: cover;
}


/* ----------------------------------------------------------------------
 fingurd
---------------------------------------------------------------------- */

.fingurd-bg {
	padding: 5rem;
	background: #fee101;
}
@media only screen and (min-width: 768px) {
.fingurd-bg {
	padding: 5rem 5rem 5rem;
}
}

.fingurd-col-l {
    width: 100%;
}
@media (min-width:768px) {
.fingurd-col-l {
    width: 60%;
}
}
.fingurd-col-r {
    width: 100%;
}
@media (min-width:768px) {
.fingurd-col-r {
    width: 39%;
}
}

.fingurd-contact {
	border: 4px solid #225BA0;
	color: #225BA0;
	font-weight: 500;
	font-size: 12px;
	text-align: center;
	padding: 3rem;
}
@media (min-width: 1025px) {
.fingurd-contact {
	font-size: 17px;
	text-align: center;
	padding: 5rem;
}
}

	
/* ----------------------------------------------------------------------
 recruit
---------------------------------------------------------------------- */
.recruit-scale {
	display:block;
	border:1px dotted #EA6383;
	border-radius:5px;
	padding:10px 15px;
	color: #EA6383;
	font-weight: 700;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	width:280px;
}

/* ----------------------------------------------------------------------
  電話受付エリア
---------------------------------------------------------------------- */
.contact-tel-area {
  border: 3px solid #235A9F;
  padding: 3rem;
  margin: 3rem 0 3rem;
}
  @media only screen and (min-width: 768px) {
    .contact-tel-area {
      padding: 3rem 5rem;
      margin: 4.5rem 0 7.5rem;
	  }
}

.contact-tel-text {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #235A9F;
}
  @media only screen and (min-width: 768px) {
    .contact-tel-text {
      font-size: 24px;
	  }
}

.contact-tel-text-2 {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
  @media only screen and (min-width: 768px) {
    .contact-tel-text-2 {
      font-size: 18px;
	  }
}

.contact-tel-number {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
	letter-spacing: .1em;
}
  @media only screen and (min-width: 768px) {
    .contact-tel-number {
      font-size: 48px;
	  }
}

.contact-tel-number span {
  font-family: "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
  @media only screen and (min-width: 768px) {
	.contact-tel-number span {
      font-size: 24px;
	}
}
/* ----------------------------------------------------------------------
  フォーム装飾
---------------------------------------------------------------------- */
.contact-head {
	display: flex;
	align-items: center;
	margin: 2em 0 1rem 0;
	font-weight: 700;
}
  @media only screen and (min-width: 1025px) {
    .contact-head {
      margin: 5rem 0 1.5rem 0;
	  }
}

.contact-name {
	font-size: 16px;
	color: #235A9F;
	font-weight: 700;
}
@media only screen and (min-width: 1025px) {
    .contact-name {
      font-size: 25px;
	 }
}

.required {
	margin-left: 15px;
	padding: 0px 15px 0 15px;
	border: 1px solid;
	color: #fff;
	background: #235A9F;
	font-size: 13px;
	font-weight: 500;
	vertical-align: middle;
	height: 25px;
}

.form-s {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  @media only screen and (min-width: 1025px) {
    .form-s {
      width: 100%;
	  }
}

.form-m {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
  @media only screen and (min-width: 1025px) {
    .form-m {
      width: 70%;
	  }
}

.form-l, .form-xl {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.form-xl {
  height: 250px; }
  @media only screen and (min-width: 1025px) {
    .form-xl {
      height: 300px;
	  }
}

input[type=submit] {
	padding: 0!important;
}
.submit-btn {
	display: block;
	cursor: pointer;
	margin: 3rem auto 3rem;  
	font-size: 17px;
	min-width: 280px;
}
  @media only screen and (min-width: 1025px) {
    .submit-btn {
		margin: 7rem auto 10rem;
	  }
}


/* ----------------------------------------------------------------------
  contact-form7 & フォーム共通スタイル
---------------------------------------------------------------------- */
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* ----------------------------------------------------------------------
  テキスト入力・テキストエリア
---------------------------------------------------------------------- */
input, textarea {
  padding: 15px 15px !important;
  background: none;
  border: 2px solid #235A9F;
  font-size: 16px;
}
textarea {
	min-width: 100%;
	min-height: 200px;
}
@media only screen and (min-width: 1025px) {
	textarea {
		min-height: 400px;
	}
}

input:focus,
textarea:focus {
  outline: none;
  background: #e7f3fb;
}
input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #e7f3fb inset;
}

input::placeholder, textarea::placeholder {
  color: #999999;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ----------------------------------------------------------------------
  ラジオボタンのカスタムスタイル
  参考: CSS-Tricks「Custom Checkboxes and Radio Buttons」​:contentReference[oaicite:0]{index=0}
---------------------------------------------------------------------- */
/* 1. デフォルトのラジオを隠す */
.wpcf7-list-item input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.wpcf7-list-item-label {
	margin-right: 3rem;
}

/* 2. 疑似要素で大きめのボックス (未選択) */
.wpcf7-acceptance .wpcf7-list-item-label:before {
	content: '';
	display: inline-block;
	width: 2em;
	height: 2em;
	margin-right: 0.5em;
	vertical-align: middle;
	border: 2px solid #235A9F;
	border-radius: 0.3em;
	background: #fff;
	transition: all 200ms ease;
  }
  
  /* 3. チェック時に✔マーク表示 */
  .wpcf7-acceptance input[type="checkbox"]:checked
	+ .wpcf7-list-item-label:before {
	background-color: #235A9F;
	border-color: #235A9F;
	box-shadow: inset 0 0 0 0.4em #fff; /* ✔ の背景確保 */
	content: '✔';
	color: #fff;
	font-size: 1.2em;
	text-align: center;
	line-height: 2em;
  }
  
  /* 4. ラベルテキスト・リンク */
  .wpcf7-acceptance .wpcf7-list-item-label {
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1.4;
  }
  .wpcf7-acceptance .wpcf7-list-item-label a {
	color: #235A9F;
	text-decoration: underline;
  }
  
  /* ----------------------------------------------------------------------
	メッセージ出力・エラー表示
  ---------------------------------------------------------------------- */
  .wpcf7 span.wpcf7-not-valid-tip {
	display: block;
	color: #ea6383;
  }
  .screen-reader-response {
	display: none;
  }
  .wpcf7-response-output {
	margin: 10rem 0;
	padding: 0 35px 0 14px;
	border-radius: 4px;
	color: #3A87AD;
	background-color: #D9EDF7;
  }
  .wpcf7-validation-errors {
	margin: 10rem 0;
	padding: 8px;
	color: #B94A48;
	background-color: #F2DEDE;
	border: 1px solid #EED3D7;
  }
  .wpcf7-mail-sent-ok {
	margin: 10rem 0;
	padding: 8px;
	color: #3A87AD;
	background-color: #D9EDF7;
	border: 1px solid #BCE8F1;
  }

/* 添付ファイルの枠 */
.wpcf7-form-control-wrap input {
	border: 1px solid #235A9F;
	margin-bottom: 2rem;
}



/* ----------------------------------------------------------------------
 contactform7 css
---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
  Contact Form 7: ラジオ＆チェックまとめ修正
---------------------------------------------------------------------- */
/* 1. デフォルトの input 非表示 */
.wpcf7-list-item input[type="radio"],
.wpcf7-acceptance input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

/* 2. ラジオボタン疑似要素 (未選択) */
.wpcf7-list-item-label:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: middle;
  border: 1.5px solid #235A9F;
  border-radius: 50%;
  background: #fff;
  transition: all 200ms ease;
}

/* 3. ラジオ選択時のドット表示 */
.wpcf7-list-item input[type="radio"]:checked
  + .wpcf7-list-item-label:before {
  background-color: #235A9F;
  box-shadow: inset 0 0 0 0.2em #fff;
  width: 1em;
  height: 1em;
}

/* 4. 同意チェック疑似要素 (未選択) */
.wpcf7-acceptance .wpcf7-list-item-label:before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  vertical-align: middle;
  border: 1.5px solid #235A9F;
  border-radius: 0.3em;
  background: #fff;
  transition: all 200ms ease;
}

/* 5. 同意チェック選択時のチェックマーク表示 */
.wpcf7-acceptance input[type="checkbox"]:checked
  + .wpcf7-list-item-label:before {
  background-color: #235A9F;
  border-color: #235A9F;
  box-shadow: inset 0 0 0 0 #fff;
  content: '✔';
  color: #fff;
  font-size: 1em;
  text-align: center;
  line-height: 1.16;
}

/* 6. ラベル文字スタイル共通 */
.wpcf7-list-item-label,
.wpcf7-acceptance .wpcf7-list-item-label {
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1.4;
}
.wpcf7-acceptance .wpcf7-list-item-label a {
  color: #235A9F;
  text-decoration: underline;
}




/* ----------------------------------------------------------------------
 lightbox.css
---------------------------------------------------------------------- */
  body:after {
	content: url(./images/recruit/close.png) url(./images/recruit/loading.gif) url(./images/recruit/prev.png) url(./images/recruit/next.png);
	display: none;
  }
  
  body.lb-disable-scrolling {
	overflow: hidden;
  }
  
  .lightboxOverlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: black;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	opacity: 0.8;
	display: none;
  }
  
  .lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 10000;
	text-align: center;
	line-height: 0;
	font-weight: 500;
  }
  
  .lightbox .lb-image {
	display: block;
	height: auto;
	max-width: inherit;
	max-height: none;
	border-radius: 3px;
  
	/* Image border */
	border: 4px solid white;
  }
  
  .lightbox a img {
	border: none;
  }
  
  .lb-outerContainer {
	position: relative;
	*zoom: 1;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	border-radius: 4px;
  
	/* Background color behind image.
	   This is visible during transitions. */
	background-color: white;
  }
  
  .lb-outerContainer:after {
	content: "";
	display: table;
	clear: both;
  }
  
  .lb-loader {
	position: absolute;
	top: 43%;
	left: 0;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
  }
  
  .lb-cancel {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	background: url(./images/recruit/loading.gif) no-repeat;
  }
  
  .lb-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
  }
  
  .lb-container > .nav {
	left: 0;
  }
  
  .lb-nav a {
	outline: none;
	background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
  }
  
  .lb-prev, .lb-next {
	height: 100%;
	cursor: pointer;
	display: block;
  }
  
  .lb-nav a.lb-prev {
	width: 34%;
	left: 0;
	float: left;
	background: url(./images/recruit/prev.png) left 48% no-repeat;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.6s;
	-moz-transition: opacity 0.6s;
	-o-transition: opacity 0.6s;
	transition: opacity 0.6s;
  }
  
  .lb-nav a.lb-prev:hover {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
  }
  
  .lb-nav a.lb-next {
	width: 64%;
	right: 0;
	float: right;
	background: url(./images/recruit/next.png) right 48% no-repeat;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.6s;
	-moz-transition: opacity 0.6s;
	-o-transition: opacity 0.6s;
	transition: opacity 0.6s;
  }
  
  .lb-nav a.lb-next:hover {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
  }
  
  .lb-dataContainer {
	margin: 0 auto;
	padding-top: 5px;
	*zoom: 1;
	width: 100%;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
  }
  
  .lb-dataContainer:after {
	content: "";
	display: table;
	clear: both;
  }
  
  .lb-data {
	padding: 0 4px;
	color: #ccc;
  }
  
  .lb-data .lb-details {
	width: 85%;
	float: left;
	text-align: left;
	line-height: 1.1em;
  }
  
  .lb-data .lb-caption {
	font-size: 13px;
	font-weight: 700;
	line-height: 1em;
  }
  
  .lb-data .lb-caption a {
	color: #4ae;
  }
  
  .lb-data .lb-number {
	display: block;
	clear: left;
	padding-bottom: 1em;
	font-size: 12px;
	color: #999999;
  }
  
  .lb-data .lb-close {
	display: block;
	float: right;
	width: 30px;
	height: 30px;
	background: url(./images/recruit/close.png) top right no-repeat;
	text-align: right;
	outline: none;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
  }
  
  .lb-data .lb-close:hover {
	cursor: pointer;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
  }


/* ----------------------------------------------------------------------
 pannellum
---------------------------------------------------------------------- */
.pan360view{
    height: 300px;
}
@media only screen and (min-width: 768px){
.pan360view{
    height: 575px;
}
}


/* ----------------------------------------------------------------------
 IE11
---------------------------------------------------------------------- */
@media all and (-ms-high-contrast: none){
body{
    font-family: "メイリオ", Meiryo, Osaka, "sans-serif";    
}
.footer{
    box-shadow: 0px 1px #235A9F;
    
}
.wrapper{
    box-shadow: 0px 1px #235A9F;
    margin-bottom: 0!important;
}
.grid,.grid-3{
    overflow: hidden;
	display: flex;
	justify-content: space-between;
}
.grid-column {
	width: 150px;
}	
}

/* ===============================================
iwasaki add
=============================================== */

.product-grid {
	display: grid;
}

@media screen and (min-width: 768px) {
	.product-grid {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto auto 1fr;
		gap: 0 3rem;
		grid-template-areas:
    "grid-main grid-side"
    "grid-main grid-side"
    "grid-case grid-case";
	}

	.grid-main {
		grid-area: grid-main;
	}

	.grid-side {
		grid-area: grid-side;
	}

	.grid-case {
		grid-area: grid-case;
	}
}

.grid-main {
	order: 1;
}

.grid-side {
	display: contents;
}

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

.grid-duedate {
	order: 2;
}

.grid-attention {
	order: 4;
}

.grid-case {
	order: 3;
}

.product-text {
	font-size: 2rem;
	line-height: 1.5;
	color: #0009;
}

@media screen and (min-width: 768px) {
	.product-text {
		font-size: 1.6rem;
	}
}

.product-img {
	display: none;
}

.product-img.is-active {
	display: block;
}

.product-img img {
	max-width: 100%;
	aspect-ratio: 760 / 506;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.product-tabs {
	gap: 0.625rem;
}

.tab-button {
	border: none;
	cursor: pointer;
}

.tab-button img {
	max-width: 100%;
	aspect-ratio: 144 / 96;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* hagihara add */
hr.wp-block-separator {
	margin-top: 1rem;
	margin-bottom: 3rem;
	border: 1px solid #E5E5E5;
}


/* 数値のカウンターリセット */
body {
	counter-reset: flow-number 0;
}

.product-content h4 {
	position: relative;
	font-size: 2.25rem;
	font-weight: 700;
	color: #0009;
	line-height: 1.2;
	padding-left: 4rem;
	margin-top: 3rem;
	margin-bottom: 1rem
}

@media screen and (min-width: 768px) {
	.product-content h4 {
		font-size: 2rem;
	}
}

.product-content h4::before {
	counter-increment: flow-number 1;
	content: counter(flow-number) "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size: 1.6rem;
	background-color: #0009;
	color: #fff;
	border-radius: 9999px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 3rem;
}

@media (min-width: 768px) {
  .product-content h4 + p {
	  margin-left: 4rem;
	  line-height: 2;
  }
}

.product-content-faq {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 5rem;
}

.faq-list {
	padding-bottom: 4rem;
}

@media screen and (min-width: 768px) {
	.faq-list {
		padding-bottom: 0;
	}
}

.faq-item + .faq-item {
	margin-top: 4rem;
}

.faq-question {
	display: flex;
	gap: 1rem;
/*	font-size: 2.25rem;*/
	font-size: 2.25rem !important;
	font-weight: 700;
	color: #0009;
	line-height: 1.5;
}

.faq-question span {
	display: block;
	min-width: 2.5rem;
}

@media screen and (min-width: 768px) {
	.faq-question {
		font-size: 2rem !important;
	}
}

.faq-answer {
	display: flex;
	gap: 1rem;
	font-size: 2rem;
	font-weight: 400;
	color: #0009;
	line-height: 1.5;
}

.faq-answer span {
	display: block;
	font-size: 2.25rem !important;
	min-width: 2.5rem;
}

@media screen and (min-width: 768px) {
	.faq-answer span {
		font-size: 1.8rem !important;
	}
}

.due-date {
	background-color: #f5f9fc;
	border-radius: 1.25rem;
}

@media screen and (min-width: 768px) {
	.due-date.mt-2 {
		margin-top: 0;
	}
}

.due-date-text {
	font-size: 2rem;
	color: #0009;
}

@media screen and (min-width: 768px) {
	.due-date-text {
		font-size: 1.7rem;
	}
}

.side-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #0009;
}

@media screen and (min-width: 768px) {
	.side-title {
		font-size: 1.7rem;
	}
}

.attention-container {
	background-color: #f5f9fc;
	border-radius: 1.25rem;
}

.attention-item {
	font-size: 2rem;
	color: #0009;
	margin-top: 2.5rem;
}

@media screen and (min-width: 768px) {
	.attention-item {
		font-size: 1.6rem;
		margin-top: 1.6rem;
	}
}

.attetion-content.side-title {
	color: #4C4948;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 2.5rem;
}

.attention-text {
	font-size: 2rem;
	line-height: 1.5;
	color: #0009;
}

@media screen and (min-width: 768px) {
	.attention-text {
		font-size: 1.6rem;
	}
}

.attention-cancel-text {
	font-size: 2rem;
	line-height: 1.5;
	color: #0009;
}

@media screen and (min-width: 768px) {
	.attention-cancel-text {
		font-size: 1.6rem;
	}
}

.case {
	padding-top: 5rem;
	padding-bottom: 8rem;
	background: #f5f9fc;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.case-contents.contents {
	padding-left: 2rem;
	padding-right: 2rem;
}

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

.case-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
}

@media screen and (min-width: 768px) {
	.case-items {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

.case-img img {
	max-width: 100%;
	/*aspect-ratio: 556 / 370;*/
	aspect-ratio: 400 / 300;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.case-item-title {
	font-size: 1.6rem;
	font-weight: 400;
	color: #0009;
	line-height: 1.5;
}

/* 制作事例カテゴリ一覧　商品表示 */
.height-100p.thumnail .responsive {
	/*aspect-ratio: 360 / 270;*/
	aspect-ratio: 768 / 576;
	object-fit: cover;
	width: 100%;
	height: auto;
}


/* 共通パーツ */
.product-section-title,
.product-content h3 {
	position: relative;
	font-size: 2.5rem;
	font-weight: 700;
	color: #0009;
	line-height: 1.2;
	padding-left: 3rem;
	margin-top: 3rem;
	margin-bottom: 2.4rem;
}

.product-section-title::before,
.product-content h3::before {
	position: absolute;
	content: "";
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background-color: #215b9f;
	border-radius: 50%;
	width: 0.7lh;
	aspect-ratio: 1;
}

@media screen and (min-width: 768px) {
	.product-section-title,
	.product-content h3 {
		font-size: 2.4rem;
	}
}

.product-text,
.product-content p {
	font-size: 2rem;
	line-height: 1.5;
	color: #0009;
	margin-top: 1rem;
}

@media screen and (min-width: 768px) {
	.product-content p {
		font-size: 1.6rem;
	}
}

.button a {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #215b9f;
	color: #fff;
	border-radius: 9999px;
	padding: 1rem;
}

.button.button-reverse a {
	background-color: transparent;
	color: #215b9f;
	border: 2px solid #215b9f;
}