@charset "utf-8";


/*** Google Font ***/
/*
* Noto Sans Japanese (japanese) http://www.google.com/fonts/earlyaccess
* This Font Software is licensed under the SIL Open Font License, Version 1.1.
* License:/font/notosansjapanese/SIL_Open_Font_License_Version_1_1.txt
*/
/**********************************************************************************
@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:100;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-Thin.otf') format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-Thin.woff') format('woff');
}
@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:200;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-Light.otf') format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-Light.woff') format('woff');
}
@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:300;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-DemiLight.otf') format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-DemiLight.woff') format('woff');
}
@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:400;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-Regular.otf) format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-Regular.woff') format('woff');
}
@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:500;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-Medium.otf') format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-Medium.woff') format('woff');
}
@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:700;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-Bold.otf') format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-Bold.woff') format('woff');
}
@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:900;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-Black.otf') format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-Black.woff') format('woff');
}
**********************************************************************************/

@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:200;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-Light.otf') format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-Light.woff') format('woff');
}
@font-face {
font-family:'Noto Sans Japanese';
font-style:normal;
font-weight:700;
src:local('Noto Sans Japanese'), url('font/notosansjapanese/otf/NotoSansJP-Bold.otf') format('opentype');
src:url('font/notosansjapanese/woff/NotoSansJP-Bold.woff') format('woff');
}

/*** Google Font ***/

/*** Css初期化 ***/
html, body, div, h1, h2, h3, h4, h5, h6, p, span, header, footer, nav, aside,
small, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
strong, sub, sup, var, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, dialog, blockquote, figure,
menu, section, time, mark, object, audio, video {
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
word-break:break-all;
word-wrap:break-word;
}

section, header, footer, aside, article, menu, nav, details, figcaption, figure {
display:block;
}

h1, h2, h3, h4, h5, h6, strong, em {
font-weight:normal;
}

body { 
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;letter-spacing: 0;height: 100%;
font-size:18px;
text-align:center;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
color:#000;
}

html {
}

.clear {
clear:both;
}

img {
border:none;
vertical-align:bottom;
}

ul,ol {
list-style:none;
}

a {
color:#727272;
outline:none;
text-decoration:none;
transition:0.7s;
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
-ms-transition:0.7s;
}

a:hover, a:active {
color:#b5b5b5;
}

strong {
padding:0;
background:linear-gradient(transparent 50%, #ffda1f 40%);
font-weight:bold;
color:#000;
}

b {
color:#007bbb;
}

.space {
  margin-bottom: 50px;
}

.br-sp {
  display: none;
}

/*【wrapper】 --------------- */

#wrapper {
width:100%;
text-align:center;
float:left;
}

#wrap {
width:100%;
float:left;
}

#wrap-in {
width:100%;
margin:0 auto;
}

#top-main {
width:840px;
float:right;
}

#wrapper-loading {
width:100%;
height:100%;
background:#fff;
position:fixed;
top:0;
left:0;
z-index:1000;
}

#wrapper-loading img {
margin:-30px 0 0 -30px;
position:fixed;
top:50%;
left:50%;
}

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


/* 【main image】 --------------- */

/***slider***/

#main-img {
width:100%;
background:#1e90ff;
float:left;
position:relative;
overflow:hidden;
}

#main-img ul,
#main-img ul li {
float:left;
display:inline;
overflow:hidden;
}

.main-img-in,
.main-img-box {
position:absolute;
top:0;
overflow:hidden;
}

#main-img ul li img {
width:100%;
min-width:100%;
height:auto;
float:left;
}

#main-img .prevslide,
#main-img .nextslide {
width:50px;
height:50px;
cursor:pointer;
position:absolute;
z-index:10;
}

#main-img .prevslide {
background:url(images/img-prev.png) no-repeat;
left:10px;
}

#main-img .nextslide {
background:url(images/img-next.png) no-repeat;
right:10px;
}


/*********************************
ページングが必要ない場合
※.wideimg-butを記述
**********************************/

/*
.wideimg-but {
display:none!important;
}
*/

.wideimg-but {
width:100%;
height:auto;
text-align:center;
position:absolute;
left:0;
bottom:0;
z-index:10;
visibility:visible;
overflow:hidden;
}

.wideimg-but p {
width:30px;
height:20px;
margin:5px 0;
background:url(images/img-bottom-but.png) no-repeat;
cursor:pointer;
overflow:hidden;
display:inline-block;
z-index:10;
}

.wideimg-but p.slidebut {
filter:alpha(opacity=80)!important;
-moz-opacity:0.8!important;
opacity:0.8!important;
}


/**********************************
*********************************/

/***still***/
#main-img-top {
width:100%;
height:auto;
background-image: url(images/00.jpg);
float:left;
}

#header-img {
width:100%;
float:left;
position:relative;
}

#main-img-top img {
width:100%;
height:auto;
}

#main-img-h {
background-image: url(images/subpage-bg.jpg);
background-position: center;
}

h1#subpage {
font-weight:bold;
color:#fff;
display: inline-block;
background:rgba(0,0,0,0.5);
border-radius: 10px;
}

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


/*【header】 --------------- */

header.site-header {
width:100%;
background:#fff;
border-bottom:1px solid #0c3966;
float:left;
}

#header-in {
width:1200px;
margin:0 auto;
}

header.site-header h1,
header.site-header p.ps-title {
width:100%;
text-align:center;
float:left;
}

.subpage header.site-header {
border-bottom:1px solid #f0f0f0;
}

#top-space {
width:1200px;
margin:0 auto;
color:#fff;
position:relative;
font-size:100%;
}

#top-space-in {
width:auto;
padding:20px 20px 40px;
background:url(images/top-space.png) repeat;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
position:absolute;
right:0;
z-index:1;
}

#top-space-arrow {
width:100%;
padding-top:40px;
float:left;
}

#top-space-arrow p.arrow {
width:50px;
height:50px;
background:url(images/top-space-arrow.png) no-repeat;
position:absolute;
bottom:20px;
}

#header-scroll {
width:100%;
float:left;
}

.fixation-scroll {
width:100%;
position:fixed;
top:0;
left:0;
z-index:1000;
box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
-webkit-box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
}

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


/*【header menu】 --------------- */

.fixation-scroll #menu-default,
.fixation-scroll #menu-original {
margin-bottom:0;
}

#menu-default,
#menu-original {
width:100%;
margin-bottom:0;
position:relative;
float:left;
}

#main-menu ul.parent {
width:100%;
height:60px;
background:#fff;
text-align:center;
float:left;
position:relative;
}

#main-menu ul.parent li {
display:inline-block;
position:relative;
}

#main-menu ul.parent li a {
width:130px;
padding:0 10px;
height:60px;
line-height:60px;
color:#0c3966;
font-size:15px;
font-weight:bold;
display:block;
float:left;
position:relative;
z-index:1;
}

#main-menu ul.parent li a:hover {
color:#4d7399;
}

#main-menu ul.child {
width:150px;
text-align:left;
display:none;
position:absolute;
left:0;
top:60px;
z-index:1;
}

#main-menu ul.child li {
width:134px;
padding:10px 8px;
background:#fff;
border-bottom:1px solid #f0f0f0;
float:left;
}

#main-menu ul.child li a {
width:118px;
height:auto;
line-height:normal;
padding:0 0 0 18px;
float:left;
}

#main-menu li.borderslide {
height:60px;
display:block;
position:absolute!important;
left:0;
top:0;
}

#main-menu li.borderslide span {
height:60px;
background:#e6f2ff;
display:block;
position:relative;
}

#menu-original ul.parent li a {
height:auto!important;
line-height:normal!important;
padding:0 1px!important;
}

#menu-original ul.child li a {
margin:0;
padding:0 0 0 18px!important;
}

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


/* 【color-area】 --------------- */

.white-area , .sky-area , .ltblue-area , .blue-area , .dpblue-area , .gray-area , tp-area , .cl-area {
width:auto;
padding:30px;
text-align:center
}

.cnt-areah2 {
width:auto;
padding:10px;
text-align:center
}

.gray-area {
background:#0c3966;
}

.dpblue-area {
background:#528fcc;
}

.blue-area {
background:#0095d9;
}

.ltblue-area {
background:#80bdff;
}

.sky-area {
background:#e6f2ff;
}

.white-area {
background:#fff;
}

.stripe {
width:auto;
padding:20px;
background: repeating-linear-gradient(-45deg,
#a0ceff,
#a0ceff 8px,
#99caff 0,
#99caff 12px
);
}

.cnt-area {
width:auto;
padding:20px;
background: repeating-linear-gradient(-45deg,
#169bd9,
#2ba2d9 8px,
#169bd9 0,
#2ba2d9 12px
);
}

.half-area {
background: linear-gradient(180deg, #fff 0%, #fff 50%, #fff3b8 50%, #fff3b8 100%);
}

.green-area {
width:auto;
padding:30px 10px;
background:#3eb370;
font-weight:bold;
}

.cream-area {
width:auto;
padding:0 10px;
background: linear-gradient(180deg, #3eb370 0%, #3eb370 10%, #fff3b8 10%, #fff3b8 100%);
}

.cream-area .textw {
width:90%;
padding:10px;
margin: 0 auto;
background:#fff;
color:#000;
text-align:left;
border-radius: 10px;
}

.flex-front {
width:100%;
height:100%;
display: flex;
align-items: stretch;
justify-content:center;
flex-wrap: wrap;
}
.front-left{
width:80%;
padding:50px 0;
text-align:left;
}
.front-right{
width:20%;
text-align:right;
}
img.frontimage{
width:100%;
height:100%;
}

.frontcatch {
padding: 1rem ;
color: #fff;
border-radius: 100vh;
background-image: -webkit-gradient(linear, right top, left top, from(#4cc764), to(#06c755));
background-image: -webkit-linear-gradient(right, #4cc764 0%, #06c755 100%);
background-image: linear-gradient(to left, #4cc764 0%, #06c755 100%);
font-size:1.3rem;
}

.fronthead01 , .fronthead02 {
padding: 10px;
font-size:1.3rem;
align-items: center; /* 線を上下中央 */
display: flex; /* 文字と線を横並び */
justify-content: center; /* 文字を中央寄せ */
}
.fronthead01 {
color: #fff;
}
.fronthead02 {
color: #ff0000;
}
.fronthead01::before,.fronthead02::before,.fronthead01::after,.fronthead02::after {
background-color: #fff; /* 線の色 */
border-radius: 5px; /* 線の両端を丸く */
content: "";
height: 3px; /* 線の高さ */
width: 40px; /* 線の長さ */
}
.fronthead01::before,.fronthead01::after {
background-color: #fff; /* 線の色 */
}
.fronthead02::before,.fronthead02::after {
background-color: #ff0000; /* 線の色 */
}

.fronthead01::before,.fronthead02::before {
margin-right: 10px; /* 文字との余白 */
transform: rotate(60deg); /* 傾ける */
}
.fronthead01::after,.fronthead02::after {
margin-left: 10px; /* 文字との余白 */
transform: rotate(-60deg); /* 傾ける */
}

.frontbar{
background: #24663f;
border-radius: 10px;
padding: 10px;
position: relative;
color: #ffe866;
font-size:1.5rem;
}
.frontbar::before{
content: "";
width: 0;
height: 0;
border-top: #24663f 30px solid;
border-left: transparent 20px solid;
border-right: transparent 20px solid;
position: absolute;
bottom: -30px;
left: 30%;
}



/*****************************************************************/
*******************/
/*【(max-width:800px)】 ---------------------------------------- */
@media screen and (max-width:800px) {

.green-area {
width:auto;
padding-top:30px;
}

.cream-area {
width:auto;
padding-top:10px;
background: linear-gradient(180deg, #3eb370 0%, #3eb370 15%, #fff3b8 15%, #fff3b8 100%);
}

.front-left{
width:50%;
padding:80px 0;
text-align:left;
}
.front-right{
width:50%;
text-align:right;
}
.frontbar::before{
right:10px;
}


}/*【(max-width:800px)】 --------------------------------------- */
/*****************************************************************/



/*********************
******************************************************************/
/*【(min-width:801px) and ( max-width:1250px) 】 --------------- */
@media screen and (min-width:801px) and ( max-width:1250px)  {




}/*【(min-width:801px) and ( max-width:1250px) 】 --------------- */
/******************************************************************/




.white-area h2 , .sky-area h2 , .ltblue-area h2 , .blue-area h2 , .dpblue-area h2 , .cnt-area h2 , .cnt-areah2 h2 {
font-size:200%;
font-weight:bold;
padding:10px 0;
margin:0;
}
.cnt-areah2 {
background:#0095d9;
}

.blue-area h2  {
background:#0c3966;
border:solid 1px #fff;
font-size:150%;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
color:#fff;
}

.ltblue-area h2 , .dpblue-area h2 , .cnt-area h2 {
color:#000
}

.white-area h2 , .sky-area h2 {
color:#0c3966;
}

.cnt-areah2 h2 {
color:#ffd700;
}

.white-area h3 , .sky-area h3 , .blue-area h3 , .ltblue-area h3 , .gray-area h3 , .cnt-area h3 , .stripe h3 {
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
text-align:center;
font-size:120%;
}

.first-area h3 , .white-area h3 , .blue-area h3 , .sky-area h3 {
font-size:150%;
}

.ltblue-area h3 {
color: #fff;
font-size:1.0em;
}

.sky-area h4 {
margin-bottom:10px;
color: #0c3966;
font-size:1.2em;
font-weight:bold;
}

.white-area p , .blue-area p , .sky-area p {
margin:0;
text-align:left;
}



.text , .textw , .textwl , .textwh , .textr {
width:auto;
padding:10px;
color:#000;
text-align:left;
border-radius: 10px;
}

.text {
background:#e6f2ff;
}
.textw , .textwl , .textwh {
background:#fff;
}
.textwl {
border:5px solid #0c3966;
}
.textwh {
display: flex;
}
.textr {
background:#ffcccc;
border:5px solid #ff0000;
}



.text h3 , .textw h3 {
color:#000;
}





.textfuki , .textwfuki {
display: flex;
justify-content: center;
position: relative;
max-width: 100%;
margin-bottom: 60px;
padding:10px;
border-radius: 10px;
color: #000;
}

.textfuki::before , .textwfuki::before {
position: absolute;
bottom: -35px;
width: 80px;
height: 40px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
}

.textfuki , .textfuki::before {
background: #e6f2ff;
}

.textwfuki , .textwfuki::before {
background: #fff;
}

.flexnone{
display:flex;
flex-flow: column;
}

.textfukibox {
display: flex;
flex-direction: column;
text-align: center;
}

.textr h3 {
padding-left:10px;
background:#ff0000;
color:#fff;
}

.textr h4 {
color:#ff0000;
text-align:center;
font-weight:bold;
}

.text p , .textw p {
margin:0;
font-size:100%;
}

.text .white-area , .textw .sky-area , .textfuki .white-area  , .textr .white-area  {
border:1px solid #e0e0e0;
border-radius: 10px;
}

.box60 h3 {
color:#0c3966;
}

.textw .checkmark01 li , .textr .checkmark01 li {
padding:10px 0 10px 40px;
position:relative;
border-bottom:2px dotted #528fcc;
}

.textw .checkmark01 li{
border-bottom:2px dotted #528fcc;
}

.textr .checkmark01 li{
border-bottom:2px dotted #ff0000;
text-align:left;
}

.textw .checkmark01 li:before , .textw .checkmark01 li:after , .textr .checkmark01 li:before , .textr .checkmark01 li:after{
margin-top:10px;
margin-left:10px;
content:"";
display:block;
position:absolute;
}
.textw .checkmark01 li:before , .textr .checkmark01 li:before{
width:16px;
height:16px;
background:#ffffff;
border:1px solid #000000;
left:0;top:5px;
}
.textw .checkmark01 li:after , .textr .checkmark01 li:after{
border-left:2px solid #ff0000;
border-bottom:2px solid #ff0000;
width:18px;
height:5px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
left:3px;
top:6px;
}

.textcr {
width:auto;
padding:10px;
background:#fff3b8;
color:#000;
text-align:center;
border-radius: 10px;
}





.dcbox1 , .dcbox2 , .dcbox3 {
border-radius:20px;
text-align:center;
color:#333;
}

.dcbox1 , .dcbox3 {
padding:20px 10px;
background:#fff3b8;
}

.dcbox2 {
width:7%;
padding:20px 10px;
margin:auto 0;
}

.dcbox1 p , .dcbox2 p , .dcbox3 p {
font-size:0.7rem;
text-align:left;
padding:10px;
}

.dcbox3 strong {
background: linear-gradient(transparent 60%, #f6c 60%);
border-bottom: 4px double #000;
font-weight: bold;
font-size:1.1rem;

}


.dcboxbar {
margin-top:30px;
padding: 1rem ;
color: #fff;
border:2px solid #fff;
border-radius: 100vh;
background-image: -webkit-gradient(linear, right top, left top, from(#ff8f1f), to(#ff8000));
background-image: -webkit-linear-gradient(right, #ff8f1f 0%, #ff8000 100%);
background-image: linear-gradient(to left, #ff8f1f 0%, #ff8000 100%);
font-size:1.3rem;

}


ol.checkmark02{
counter-reset:list;
list-style-type:none;
font: 14px/1.6 'arial narrow', sans-serif;
padding:0;
margin-left:10px;

}
ol.checkmark02 li{
position:relative;
padding: 0 0 0 30px;
margin: 7px 0 7px 0px;
font-weight: bold;
font-size:14px;
line-height: 29px;
border: dashed 1px transparent;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
ol.checkmark02 li:before{
counter-increment: list;
content: counter(list);
position: absolute;
left: -10px;
width: 30px;
height: 30px;
text-align: center;
color: #fff;
line-height:30px;
background: #F6A38B;
border-radius: 50%;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
ol.checkmark02 li:hover{
border-bottom-color: #F6A38B;
}





img.case-image , img.five-image , img.voice-image {
width:100%;
height:auto;
background:#fff3b8;
border-radius: 18px 18px 0 0;
}

img.ansin {
width:100%;
height:auto;
border-radius: 10px;
}

img.bg {
width:100%;
height:auto;
}

img.na {
width:95%;
border-radius: 10px;
}

img.tel {
width:67%;
height:auto;
margin:20px;
}

img.hfimage {
margin-top:50px;
width:50%;
height:auto;
}

img.yimage {
width:30%;
}

.support {
padding-bottom: 10px;
font-weight:bold;
font-size:2.5rem;
}



/* 吹き出し本体 - 左右の中心 */
.balloon1{
  width: 80%;
  position: relative;
  padding: 10px;
  margin:10px 0 20px 20px;
  background: #fff;
  color: #e6002f;
  font-size: 0.6em;
  border-radius: 10px;
}
/* 三角アイコン - 左右の中心 */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -15px;
  margin: 0 auto;
  border-top: 15px solid #fff;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

.cp_card {
	width: 23%;
	height: auto;
	position: relative;
	background: #ffffff;
	overflow: visible;
	margin: 0.5em auto;
	border: 2px solid #528fcc;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}
.cp_ribbon10 {
	position: absolute;
	top: -6px;
	left: -6px;
	padding: 5px 10px;
	padding-right: 40px;
	letter-spacing: 0.1px;
	color: #fff;
	background: linear-gradient(-45deg,transparent,transparent 25%,#528fcc 0%,#528fcc);
}
.cp_ribbon10::before {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	content: ' ';
	border: 3px solid transparent;
	border-top: 3px solid #0c3966;
	border-right: 3px solid #0c3966;
}


.elect {
  position: relative;
  }

.elect p {
  position: absolute;
  top:10px;/*画像の左上に配置*/
  left:10px;
  margin: 0; /*余計な隙間を除く*/
  color: white;/*文字を白に*/
  background:#e6002f;/*背景色*/
  font-size: 1.0em;
  line-height: 1;/*行高は1に*/
  padding:10px;/*文字周りの余白*/
border: 3px solid #fff;
border-radius: 20px;

  }

.elect img {
  width: 100%;
  }



.service-wrapper {  
display: block;
position: relative;
margin: 15px auto;
width: 43%;
height: auto;
box-sizing: border-box;
text-align:center;
}

.service {  
display: inline-block;
position: absolute;
top: -6px;
right: 10px;
margin: 0;
padding: 10px 0 7px;
z-index: 2;
width: 40px;
text-align: center;
color: white;
font-size: 13px;
font-weight: bold;
background: #ff8f1f;
border-radius: 2px 0 0 0;
}

.service:before {
position: absolute;
content: '';
top: 0;
right: -5px;
border: none;
border-bottom: solid 6px #b36415;
border-right: solid 5px transparent;
}

.service:after {
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 10px solid #ff8f1f;
}

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



/*【free】 --------------- */

.free-area {
width:100%;
margin-bottom:100px;
float:left;
}

#free-area-widget {
width:100%;
margin-bottom:30px;
float:left;
}

.first-area h2 {
font-size:250%;
font-weight:bold;
padding:0;
margin-bottom:10px;
color:#0c3966;
}

.first-area h3 {
border:solid 1px #fff;
font-size:200%;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
}


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


/* 【footer】 --------------- */

#top-scroll {
width:120px;
position:fixed;
bottom:20px;
right:0;
float:right;
z-index:10;
}

#top-scroll-in {
width:60px;
height:60px;
float:left;
}

#footer-in {
width:100%;
padding:80px 0 0 0;
background:#0c3966;
text-align:center;
color:#fff;
overflow:hidden;
clear:both;
float:left;
position:relative;
}

#footer-in a {
color:#fff;
}

#footer-in a:hover {
color:#b5b5b5;
}

#footer-body {
width:1200px;
margin:0 auto;
}

#footer-menu {
width:100%;
margin-bottom:20px;
float:left;
}

.footer-menubox {
width:18%;
}


#footer-menu .footer-menu-in1,
#footer-menu .footer-menu-in2 {
width:100%;
margin-bottom:20px;
float:left;
}

#footer-menu .footer-menu-in1 a,
#footer-menu .footer-menu-in2 a {
width:auto;
margin-right:10px;
padding-left:20px;
background:url(images/icon1.png) no-repeat left center;
display:inline-block;
}

.footer-menu-in3 {
width:100%;
margin:20px 0;
float:left;
text-align:left;
}


#pc-browser,
#sp-browser {
width:100%;
margin-top:30px;
text-align:center;
font-weight:bold;
font-size:30px;
float:left;
}


#menumenu ul.lefty , #menumenu ul.righty { 
width:48%;
margin: 10px 0; 
padding :0; 
list-style: none; 
border-top: 1px dotted #fff;
}

#menumenu ul.lefty { 
float:left;
}

#menumenu ul.righty { 
float:right;
}

#menumenu li{ 
padding-left :10px; 
margin:0; 
border-bottom: 1px dotted #fff;
}
#menumenu li a {
display: block;
padding: 10px 0;
color:#fff;
width: 100%;
margin: 0;
text-align:left;
text-decoration:none;
font-size: 14px;
}
#menumenu li a:hover{
background: url(入れ替わる画像のアドレス) no-repeat left center;
}





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


.text {
text-align:left;
}

.info {
  -webkit-overflow-scrolling: touch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  display: -webkit-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 100%;
  height: 13em;
  margin: 0 auto;
  overflow-y: scroll
}

.info dd,
.info dt {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: .5em;
  padding-left: .5em
}

.info dt {
  font-style: normal;
  font-weight: initial
}

.info dt:first-of-type {
  padding-top: .5em;
  border-top: 1px dotted #343a40
}

.info dt time {
  margin-right: .5em
}

.info dt span {
  box-sizing: border-box;
  display: inline-block;
  width: 7em;
  margin-right: .5em;
  padding: 0 .5em;
  background-color: #ff8f1f;
  color: #fff;
  font-size: .8em;
  line-height: 1.75;
  text-align: center
}

.info time {
  color: #adb5bd
}

.info dd {
  margin-left: 0;
  margin-bottom: .5em;
  border-bottom: 1px dotted #343a40
}

.info dd:nth-of-type(-n+3) {
  position: relative
}


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


/**************************************************
***************************************************
/* 【1201px以上の場合】 --------------- */
/**************************************************
***************************************************
*/

/**********************************************************************************
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Thin.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Light.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-DemiLight.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Regular.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Medium.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Bold.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Black.ttf) format('truetype');}
**********************************************************************************/

@media screen and (min-width:1251px) {

#main-img-h {
width:100%;
height:500px;
}

h1#subpage {
margin:200px 0;
padding:10px 40px 0;
font-size:3.5rem;
}


.spfull-area{
width:auto;
padding:30px;
text-align:center
}

.container {
width:1200px;
margin:0 auto;
}

#main-menu ul.parent {
border-bottom:1px solid #f0f0f0;
}

.flex , .flex-between , .flex-around , .flex-case , .tp-area , .flex-five {
width:100%;
height:100%;
display: flex;
}

.flex , .flex-between , .flex-around {
align-items: center;
}

.flex-case , .flex-five {
align-items: stretch;
justify-content:center;
flex-wrap: wrap;
}

.close-box {
width:100%;
}
.casebox {
width:23%;
margin:5px;
border: 2px solid #ccc;
font-size:0.8em;
border-radius:20px;
}

.fivebox1 , .fivebox2 , .voicebox {
margin:5px;
border: 2px solid #0c3966;
font-size:0.8em;
border-radius:20px;
background:#fff;
}

.fivebox1 , .fivebox2 {
width:18%;
}

.dcbox1 , .dcbox3 {
width:25%;
}

.voicebox {
width:23%;
}

.casetext , .fivetext , .voicetext {
padding:10px;
}

.casetext p {
color:#0c3966;
margin-bottom:15px;
font-size:1.3em;
font-weight:bold;
}

.casetag {
margin-top:10px;
text-align: center;
}

.casetag h3.tag01 , .casetag h3.tag02 , .casetag h3.tag03 {
padding:5px 15px;
color:#fff;
font-size:1.0em;
font-weight:normal;
display: inline-block;
border-radius:5px;
}

.casetag h3.tag01 {
background:#ff0000;
}

.casetag h3.tag02 {
background:#008800;
}

.casetag h3.tag03 {
background:#0c3966;
}

img.cc {
width:23%;
height:auto;
}

.checktb {
width:60%;
}

.rightimg {
width:60%;
}

.dr {
width:40%;
height:100%;
vertical-align: middle;
text-align: right;
background-image: url(images/dr.jpg);
}

.flexbox {
width:100%;
height:100%;
display: flex;
align-items: stretch;
justify-content:center;
flex-wrap: wrap;
}

.box217 {
width:59%;
}

.box783 {
width:39%;
vertical-align: bottom;
text-align: right;
}

.box60 {
width:60%;
padding:30px;
}

.box50 {
width:50%;
margin:10px;
vertical-align: middle;
}

.box40 {
width:40%;
vertical-align: middle;
text-align: right;
}

.box60 h3 {
margin-bottom:20px;
border-bottom: 4px solid #0c3966;
}

.textr h4 {
font-size:1.5em;
margin-bottom:10px;
}

.sp , .pink {
display: none !important;
}

.flex , .flex-between {
display:flex;
justify-content:space-between;
}

flex-around {
display:flex;
justify-content:space-around;
}

.flex>p{
}

.flex>img{
width: 100%;
}


}





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






/**************************************************
***************************************************
横幅801px以上　←　→　1250px以下 normanet2023
***************************************************
**************************************************/

@media screen and (min-width:801px) and ( max-width:1250px)  {

/**********************************************************************************
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Thin.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Light.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-DemiLight.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Regular.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Medium.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Bold.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Black.ttf) format('truetype');}
**********************************************************************************/
@font-face {
src:url(font/notosansjapanese/ttf/NotoSansJP-Light.ttf) format('truetype');
}
@font-face {
src:url(font/notosansjapanese/ttf/NotoSansJP-Bold.ttf) format('truetype');
}

.sp {
display: none !important;
}


body { 
font-family:"Noto Sans Japanese","メイリオ",Meiryo,Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
font-size:15px;
}


#wrapper-in {
width:100%;
margin:0 auto;
float:none;
overflow:hidden;
}


#main-img-h {
width:100%;
height:500px;
}

h1#subpage {
margin:200px 0;
padding:10px 40px 0;
font-size:3.5rem;
}


breadcrumbs {
margin-top:50px;
}

.br-sp {
display: block;
}


#header-sp {
width:100%;
background:#fff;
position:fixed;
top:0;
left:0;
z-index:400;
box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
-webkit-box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
}

#header-sp-in {
width:97%;
margin:0 auto;
}

header.site-header h1,
header.site-header p.ps-title {
width:auto;
text-align:left;
}

header.site-header h1 img,
header.site-header p.ps-title img {
float:left;
}

.subpage header.site-header {
border:0;
}

.flex , .flex-between , .flex-around , .flex-case , .tp-area , .flex-five {
width:100%;
height:100%;
display: flex;
}

.flex , .flex-between , .flex-around {
align-items: center;
}

.flex-case , .flex-five {
align-items: stretch;
justify-content:center;
flex-wrap: wrap;
}

.close-box {
width:100%;
}
.casebox {
width:23%;
margin:5px;
border: 2px solid #ccc;
font-size:0.8em;
border-radius:20px;
background:#fff;
}

.fivebox1 , .fivebox2 , .voicebox {
margin:5px;
border: 2px solid #0c3966;
border-radius:20px;
background:#fff;
}

.fivebox1 , .fivebox2 {
width:18%;
}

.dcbox1 , .dcbox3 {
width:23%;
}

.voicebox {
width:48%;
}

.casetext , .fivetext , .voicetext {
padding:10px;
}

.casetext p {
color:#0c3966;
margin-bottom:15px;
font-size:1.3em;
font-weight:bold;
}

.casetag {
margin-top:10px;
text-align: center;
}

.casetag h3.tag01 , .casetag h3.tag02  , .casetag h3.tag03 {
padding:5px 15px;
color:#fff;
font-size:1.0em;
font-weight:normal;
display: inline-block;
border-radius:5px;
}

.casetag h3.tag01 {
background:#ff0000;
}

.casetag h3.tag02 {
background:#008800;
}

.casetag h3.tag03 {
background:#0c3966;
}

img.cc {
width:23%;
height:auto;
}

.checktb {
width:60%;
}

.rightimg {
width:60%;
}

.dr {
width:40%;
height:100%;
vertical-align: middle;
text-align: right;
background-image: url(images/dr.jpg);
}

.flexbox {
width:100%;
height:100%;
display: flex;
align-items: stretch;
justify-content:center;
flex-wrap: wrap;
}

.box217 {
width:59%;
}

.box783 {
width:39%;
vertical-align: bottom;
text-align: right;
}

.box60 {
width:60%;
padding:30px;
}

.box50 {
width:50%;
margin:10px;
vertical-align: middle;
}

.box40 {
width:40%;
vertical-align: middle;
text-align: right;
}

.box60 h3 {
margin-bottom:20px;
border-bottom: 4px solid #0c3966;
}

.textr h4 {
font-size:1.5em;
margin-bottom:10px;
}

.sp , .pink {
display: none !important;
}

.flex , .flex-between {
display:flex;
justify-content:space-between;
}

flex-around {
display:flex;
justify-content:space-around;
}

.flex>p{
}

.flex>img{
width: 100%;
}


#header-in,
#wrap-in,
#top-main,
#footer-body {
width:100%;
}

#menu-default,
#menu-original {
width:auto;
margin-bottom:0;
position:static;
float:none;
}

#main-menu-hidden {
width:100%;
height:100%;
display:none;
position:fixed;
top:0;
right:0;
padding:58px 0 0;
background:#528fcc;
z-index:300;
overflow-y:scroll;
}

#main-menu ul.parent {
width:96%;
line-height:normal;
margin:30px auto 50px auto;
background:none;
border-top:0;
text-align:center;
float:none;
}

#main-menu li {
width:96%;
margin-bottom:0;
border-bottom:0;
float:left;
}

#main-menu ul.parent li a {
width:100%;
height:auto;
line-height:normal;
padding:8px 0 8px 18px;
border-top:1px solid #4d6680;
text-align:left;
font-size:15px;
font-weight: bold;
color:#fff!important;
box-sizing:border-box;
float:none;
display:inline-block;
}

#main-menu ul.child {
width:100%;
line-height:normal;
padding-top:0px;
display:inline;
position:static;
top:0;
float:left;
}

#main-menu ul.child li {
width:100%;
padding:0;
background:none;
border-bottom:0;
}

#main-menu ul.child li a {
width:100%;
padding:3px 0 3px 30px!important;
margin:0 0 0 15px;
background:url(images/icon2.png) no-repeat 10px center;
border-top:1px dotted #4d6680;
font-weight: normal;;
color:#ccc!important;
}

#main-menu li.borderslide {
height:auto;
display:inline;
position:static!important;
bottom:0;
}

#main-menu li.borderslide span {
height:auto;
background:none;
border:0;
display:inline;
position:static;
}

#main-menu-smart {
width:auto;
height:auto;
float:right;
}

#smart-menu {
width:50px;
float:right;
position:relative;
}

#s-menu {
width:50px;
height:50px;
background:url(images/s-menu-icon.png) no-repeat;
display:block;
position:absolute;
top:0;
right:0;
cursor:pointer;
z-index:600;
}

.s-menu-slide {
position:fixed!important;
top:0!important;
right:1.5%!important;
background-position:-50px 0!important;
}

#widget-area {
width:100%;
margin-top:0px;
float:left;
}

#widget-area h2 {
width:100%;
box-sizing:border-box;
}

#search {
width:100%;
box-sizing:border-box;
}

#top-scroll {
width:70px;
left:10px;
}

#top-scroll-in {
bottom:10px;
right:0;
}

#sns-but {
width:100%;
margin-right:0;
margin-bottom:20px;
text-align:center;
}

#sns-but p {
margin-left:0;
display:inline-block;
float:none;
}

#footer-in {
padding:30px 0 50px;
}

#main-img,
#main-img-h {
margin-bottom:30px;
}

#main-img-top img {
width:100%;
height:auto;
}


#main-img .prevslide,
#main-img .nextslide {
display:none!important;
}

#header-img {
width:100%;
}


#footer-in {
padding-bottom:0;
}

#menumenu {
width:auto;
margin:0 10px;
}

#footer-menu .footer-menu-in3 {
width:auto;
margin:20px 8px 0 10px;
float:left;
text-align:left;
font-size:80%;
}

#footer-copy {
width:100%;
padding:10px 0;
float:right;
background-color: #000;
font-size:80%;
}

#footer-title {
width:90%;
padding:5% 5% 25% 5%;
float:left;
background-color: #fff;
text-align:left;
font-size:80%;
font-weight:bold;
color: #0c3966;
}


}






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

/**************************************************
***************************************************
横幅800px以下 normanet2023
***************************************************
**************************************************/

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

/**********************************************************************************
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Thin.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Light.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-DemiLight.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Regular.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Medium.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Bold.ttf) format('truetype');}
@font-face {src:url(font/notosansjapanese/ttf/NotoSansJP-Black.ttf) format('truetype');}
**********************************************************************************/

@font-face {
src:url(font/notosansjapanese/ttf/NotoSansJP-Light.ttf) format('truetype');
}
@font-face {
src:url(font/notosansjapanese/ttf/NotoSansJP-Bold.ttf) format('truetype');
}

.pc {
display: none !important;
}


body { 
font-family:"Noto Sans Japanese","メイリオ",Meiryo,Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
font-size:15px;
}

.br-sp {
display: block;
}

#wrapper-in {
width:100%;
margin:0 auto;
float:none;
overflow:hidden;
}


#main-img-h {
width:100%;
height:150px;
}

h1#subpage {
margin:50px 0;
padding:5px 20px;
font-size:1.5rem;
}


breadcrumbs {
margin-top:50px;
}

#header-sp {
width:100%;
background:#fff;
position:fixed;
top:0;
left:0;
z-index:400;
box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
-webkit-box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 5px -5px rgba(0,0,0,0.2);
}

#header-sp-in {
width:97%;
margin:0 auto;
}

header.site-header h1,
header.site-header p.ps-title {
width:auto;
text-align:left;
}

header.site-header h1 img,
header.site-header p.ps-title img {
float:left;
}

.subpage header.site-header {
border:0;
}

#main-img,
#main-img-h {
margin:0;
}

#main-img {
height:auto;
}

#main-img-h img {
width:100%;
height:auto;
}

h2 , h3 {
text-align:center;
}

.first-area {
width:auto;
padding:10px;
margin-top:0;
background:#80bdff;
border-top:solid 0px #0c3966;
}

@media screen and (min-width:451px){
.first-area {
margin-top:0;
background:#528fcc;
}
}

.container {
width:100%;
margin:0 auto;
}

.white-area , .sky-area , .ltblue-area , .blue-area , .dpblue-area , .gray-area , .cl-area {  
width:auto;
padding:10px;
margin:0;
}


.cl-area {
text-align:center;
}

.cnt-area , .stripe {
padding:10px 10px 20px 10px;
}

.first-area h2 , .white-area h2 , .sky-area h2 , .ltblue-area h2 , .cnt-areah2 h2 {
font-size:150%;

margin:10px; 0
}

.cnth2-area h2 {
font-size:0.5em;
}

.blue-area h3 {
color:#0c3966;
}

.gray-area h3 {
color:#fff;
}

.left-area h3 {
margin:10px;
text-align:left;
}

.white-area p , .blue-area p {
font-size:100%;
margin:10px;
text-align:left;
}

.textr h4 {
padding:10px;
font-size:1.0em;
}

.textw .checkmark01 li:before,.textw .checkmark01 li:after,.textr .checkmark02 li:before,.textr .checkmark02 li:after{
margin-top:7px;

}

.front-left{
width:100%;
padding:10px 0;
text-align:left;
}
.front-right{
width:30%;
text-align:right;
}


.box60 h3 {
margin:0;
text-decoration: underline;
}

.box40 {
width:auto;
text-align:center;
}

.spflexbox {
width:100%;
height:100%;
display: flex;
align-items: stretch;
justify-content:center;
}

.support {
padding-top:0;
font-weight:bold;
font-size:1.0rem;
}

.dli-arrow-down {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  position: relative;
  width: 0.1em;
  height: 1em;
  background: currentColor;
}

.dli-arrow-down::before {
  content: '';
  width: 0.65em;
  height: 0.65em;
  border: 0.1em solid currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  position: absolute;
  left: 50%;
  bottom: -0.05em;
  box-sizing: border-box;
}


.sp80 {
width:75%;
padding-top:50px;
}

.sp20 {
width:20%;
padding-top:30px;
}

img.half {
width :50% ;
height:auto;
padding-top:5px;
}

img.hfimage {
width:50%;
height:auto;
}

img.cc {
width:100%;
height:auto;
}

#header-in,
#wrap-in,
#top-main,
#footer-body {
width:100%;
}

#menu-default,
#menu-original {
width:auto;
margin-bottom:0;
position:static;
float:none;
}

#main-menu-hidden {
width:100%;
height:100%;
display:none;
position:fixed;
top:0;
right:0;
padding:58px 0 0;
background:#528fcc;
z-index:300;
overflow-y:scroll;
}

#main-menu ul.parent {
width:96%;
line-height:normal;
margin:20px auto 50px auto;
background:none;
border-top:0;
text-align:center;
float:none;
}

#main-menu li {
width:96%;
margin-bottom:0;
border-bottom:0;
float:left;
}

#main-menu ul.parent li a {
width:100%;
height:auto;
line-height:normal;
padding:8px 0 8px 18px;
border-top:1px solid #4d6680;
text-align:left;
font-size:15px;
font-weight: bold;
color:#fff!important;
box-sizing:border-box;
float:none;
display:inline-block;
}

#main-menu ul.child {
width:100%;
line-height:normal;
padding-top:0px;
display:inline;
position:static;
top:0;
float:left;
}

#main-menu ul.child li {
width:100%;
padding:0;
background:none;
border-bottom:0;
}

#main-menu ul.child li a {
width:100%;
padding:3px 0 3px 30px!important;
margin:0 0 0 15px;
background:url(images/icon2.png) no-repeat 10px center;
border-top:1px dotted #4d6680;
font-weight: normal;;
color:#ccc!important;
}

#main-menu li.borderslide {
height:auto;
display:inline;
position:static!important;
bottom:0;
}

#main-menu li.borderslide span {
height:auto;
background:none;
border:0;
display:inline;
position:static;
}

#main-menu-smart {
width:auto;
height:auto;
float:right;
}

#smart-menu {
width:50px;
float:right;
position:relative;
}

#s-menu {
width:50px;
height:50px;
background:url(images/s-menu-icon.png) no-repeat;
display:block;
position:absolute;
top:0;
right:0;
cursor:pointer;
z-index:600;
}

.s-menu-slide {
position:fixed!important;
top:0!important;
right:1.5%!important;
background-position:-50px 0!important;
overflow-y:scroll;
}

#widget-area {
width:100%;
margin-top:0px;
float:left;
}

#widget-area h2 {
width:100%;
box-sizing:border-box;
}

#search {
width:100%;
box-sizing:border-box;
}

#top-scroll {
width:70px;
left:10px;
}

#top-scroll-in {
bottom:10px;
right:0;
}

#sns-but {
width:100%;
margin-right:0;
margin-bottom:20px;
text-align:center;
}

#sns-but p {
margin-left:0;
display:inline-block;
float:none;
}

#footer-in {
padding:30px 0 50px;
}

#main-img,
#main-img-h {
margin-bottom:30px;
}

#main-img-top img {
width:100%;
height:auto;
}


#main-img .prevslide,
#main-img .nextslide {
display:none!important;
}

#header-img {
width:100%;
}


#footer-in {
padding-bottom:0;
}

#menumenu {
width:auto;
margin:0 10px;
}

.footer-menu-in3 {
width:auto;
margin:20px 8px 20px 10px;
float:left;
text-align:left;
font-size:80%;
}


.flex-case , .flex-five {
display: flex;
align-items: stretch;
justify-content:center;
flex-wrap: wrap;
}

.casebox {
width:44%;
margin:5px;
border: 2px solid #ccc;
font-size:0.8em;
border-radius:20px;
background:#fff;
}

.fivebox1 , .fivebox2 , .voicebox {
margin:5px;
border: 2px solid #0c3966;
border-radius:20px;
background:#fff;
}

.fivebox1 {
width:44%;
}

.fivebox2 {
width:92%;
}

.dcbox1 , .dcbox3 {
width:60%;
}

.dcbox2 {
width:60%;
margin:auto 0;
}

.casetext , .fivetext , .voicetext {
padding:10px;
}

.casetext p {
color:#0c3966;
margin-bottom:15px;
font-size:1.3em;
font-weight:bold;
}

.casetag {
margin-top:10px;
text-align: center;
}

.casetag h3.tag01 , .casetag h3.tag02  , .casetag h3.tag03 {
padding:5px 15px;
color:#fff;
font-size:1.0em;
font-weight:normal;
display: inline-block;
border-radius:5px;
}

.casetag h3.tag01 {
background:#ff0000;
}

.casetag h3.tag02 {
background:#008800;
}

.casetag h3.tag03 {
background:#0c3966;
}

img.case-image , img.five-image , img.voice-image {
width:100%;
height:auto;
border-radius: 18px 18px 0 0;
}



.cp_card {
	width: 45%;
	height: auto;
	position: relative;
	background: #ffffff;
	overflow: visible;
	margin: 0.5em auto;
	border: 2px solid #528fcc;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}
.cp_ribbon10 {
	position: absolute;
	top: -6px;
	left: -6px;
	padding: 5px 10px;
	padding-right: 40px;
	letter-spacing: 0.1px;
	color: #fff;
	background: linear-gradient(-45deg,transparent,transparent 25%,#528fcc 0%,#528fcc);
}
.cp_ribbon10::before {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	content: ' ';
	border: 3px solid transparent;
	border-top: 3px solid #0c3966;
	border-right: 3px solid #0c3966;
}

.checkmark ,
.checkbox ,
.checkboxl {
font-size:13px;
font-weight: bold;
}

.checkmark001:before{
left:0;top:0;
}

.checkmark001:after{
left:3px;
top:3px;
}


}

/**************************************************
***************************************************
480px以下の場合
***************************************************
**************************************************/

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

header.site-header h1 img,
header.site-header p.ps-title img {
width:70%;
height:auto;
}

#top-post1 .txpost-thumbnail,
#top-post1 .txpost-noimage {
width:30%;
height:auto;
} 

#top-post1 .txpost-thumbnail p,
#top-post1 .txpost-noimage p {
width:90%;
height:auto;
}

#top-post1 .txpost-thumbnail img,
#top-post1 .txpost-noimage img {
width:100%;
}

.textw .checkmark01 li , .textr .checkmark02 li {
font-size:0.8rem;
}

.frontbar , .fronthead {
font-size:1.0rem;
}



}

/**************************************************
***************************************************
320px以下の場合
***************************************************
**************************************************/

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

img.free-img {
width:100%;
height:auto;
}

}