@charset "utf-8";
@import url("fonts.css");
/* CSS Document */
body {color:#332823;}
a {outline:none;}
a:link {color:#039; text-decoration: underline;}
a:visited {color:#039; text-decoration: underline;}
a:hover{color:#f63; text-decoration: underline;}
ul{padding-left:0;}
li{list-style:none;}
h1 {
	display: none;
}
.menu-content h1 {
	display: block;
	padding: 70px 35px 0;
	color: #ffffff;
	font-weight: 300;
	font-size: 0.9em;
}
h2 {
	padding: 0.8rem 1rem;
	color: #ffffff;
	background: #606197;
	-webkit-box-shadow: 5px 5px 0 #d0d0e1;
	box-shadow: 5px 5px 0 #d0d0e1;
	margin-bottom:20px;
	width:calc(100% - 5px);
	display: inline-flex;
	align-items: center;
}
h2 svg {
	margin-right: 10px;
}
.logo {
	margin: auto;
}
.menu-content .logo{
	text-align:center;
	margin-top:20px;
}
.menu-content .logo img{
	height:60px;
}
.wrapper {
	max-width: 950px;
	margin: auto;
	overflow: hidden;
}
section {
	margin: 20px 0;
}
section.slider {
	margin-top: 0;
}

header .wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding:10px 0;
}
header .logo img {
	height: 60px;
}
	
.loginarea {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 10px 6px;
	margin-top: 5px;
	background-color: #d0d0e1;
	border: solid 2px #60619b;
}
.loginarea ul {
	display: block;
	font-size: 0.8em;
	line-height: 1.4em;
	margin-top: -4px;
}
.loginarea ul li {
	border: none;
	margin-left:0;
}
.loginarea ul li:before {
	content: url(https://pdisaipan.com/img/common/ico_arw1.png);
	margin-right: 5px;
}
/*スライダー*/
.slider img{
	width:100%;
	height:300px;
	object-fit: cover;
}
.slider .slick-slide{
	height:auto;
}
.slider .slick-arrow{
	z-index:2;
}
.slider .slick-next{
	right:2%;
}
.slider .slick-prev{
	left:2%;
}
.slider .slick-slide:not(.slick-center) {
	opacity: 0.5;
}
.slider div{
	position: relative;
}
.slider div p{
	position: absolute;
	bottom: 0px;
	left: 0px;
	color: #ffffff;
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1.3em;
	background-color: rgba(96,97,151,0.8);
	width: 100%;
	padding: 10px 10px 5px;
}
.pickup ul{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.pickup ul li{
	width:calc(100%/1 - 10px);
	margin:5px;
	position: relative;
}
.pickup img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}
._a {
	max-width: 300px;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 60%;
	opacity: 0.8;
}
._a a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 2em 1em;
	/*border: 1px solid #606197;*/
	background: linear-gradient(to right, #ffffff 50%, #606197 50%);
	background-size: 200% auto;
	color: #222222;
	font-size: 12px;
	text-decoration: none;
	text-align: center;
	transition: .3s;
	position: relative;
}
._a a:after {
	content: "";
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 100%;
	height: 100%;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}
._a a:hover {
	color: #ffffff;
	background-position: -100% 0;
}


.bg_pattern {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #ffe9a7;
	opacity: 0.4;
	z-index: -1;
}
.Diagonal_v3 {
	background-size: 20px 20px;
	background-image: repeating-linear-gradient(45deg, #ffc107 0, #ffc107 2px, #ffe9a7 0, #ffe9a7 50%);
}
.theme .inner {
	width: 100%;
	padding: 10px;
	background-image: radial-gradient(rgb(255, 255, 255) 16%, transparent 16%),radial-gradient(rgb(255, 255, 255) 16%, transparent 16%);
	background-position: 0px 0px,4px 4px;
	background-size: 8px 8px;
	background-color: #d0d0e18f;
	background-repeat: repeat;
}
.theme ul {
	display: flex;
	flex-wrap: wrap;
}
.theme ul li {
	width: calc(100%/2 - 10px);
	margin: 5px;
	position: relative;
}
.theme ul li img {
	width: 100%;
	height: 45vw;
	object-fit: cover;
	max-height: 200px;
}
/*
.theme ul li a {
	position: relative;
}*/
.theme ul li a:hover{
	opacity: 0.8;
}
.theme ul li a h3 {
	position: absolute;
	top:0;
	background-color: #6a6b9b;
	width: 100%;
	padding: 5px;
	color: #ffffff;
	font-weight: 300;
	font-size: 0.9em;
}
.theme ul li a p {
	position: absolute;
	background-color: #fff;
	width: 100%;
	padding: 10px 5px;
	bottom: 0;
	color: #222222;
	font-size: 12px;
}

.about .inner {
	background-image:
	repeating-linear-gradient(to bottom,
	  transparent 25px,
	  rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
	  transparent 27px,  transparent 51px, 
	  rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
	  transparent 53px,  transparent 77px, 
	  rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
	  transparent 79px,  transparent 103px, 
	  rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
	  transparent 105px,  transparent 129px, 
	  rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),
 
	repeating-linear-gradient(to right,
	  transparent 25px,
	  rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
	  transparent 27px,  transparent 51px, 
	  rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
	  transparent 53px,  transparent 77px, 
	  rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
	  transparent 79px,  transparent 103px, 
	  rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
	  transparent 105px,  transparent 129px, 
	  rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
	padding: 20px 5px;
	border: 3px solid #d0d0e1;
	width: 95%;
	margin: auto;
}
.about h3 {
	position: relative;
	background: #d0d0e1;
	box-shadow: 0px 0px 0px 5px #d0d0e1;
	padding: 0.2em 0.5em 0.2em 1em;
	color: #454545;
	width: fit-content;
margin-left:10px;
	max-width: calc(100% - 20px);
}

.about h3:after {
	position: absolute;
	content: '';
	left: -7px;
	top: -7px;
	border-width: 0 0 15px 15px;
	border-style: solid;
	border-color: #fff #fff #606197;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.about p {
	margin: 20px;
}
.about p:last-child {
	margin-bottom: 0;
}

.news-list{
	list-style: none outside;
	margin: 0 auto;
	padding: 0;
width: 95%;
}
.news-list .item a{
	display: flex;
	flex-wrap: wrap;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #CCC;
	padding: 10px 5px;
}
.news-list .item .date{
	padding: 2px 20px 0 0;
}
.news-list .item .category{
	margin: 0;
	min-width: 140px;
	padding: 0 20px 0 0;
}
.news-list .item .category span{
	background: #fe00ba;
	color: #FFF;
	text-align: center;
	display: inline-block;
	padding: 5px 20px;
	font-size: 12px;
	line-height: 1;
}
.news-list .item .title{
	margin-top: 10px;
	width: 100%;
	font-weight: 600;
}
.news-list .item .title span{
	font-weight:300;
}
.news-list .item .title span:before {
	content: "\A";
	white-space: pre;
}

a.btn-sns {
	font-weight: 700;
	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.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	font-size: 2.0rem;
	line-height: 50px;
	width: 50px;
	height: 50px;
	padding: 5px;
	letter-spacing: 0;
	color: #fff;
	border-radius: 50%;
}

.snslink{
	text-align: center;
}
.snslink a{
	margin:0 5px;
}
a.btn-sns--facebook {
	background: #1877f2;
}

a.btn-sns--instagram {
	background: #d6249f;
	background: -webkit-linear-gradient(45deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	background: linear-gradient(45deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
a.btn-sns--line {
    background: #07b53b;
}
#page_top{
	width: 100px;
	height: 60px;
	position: fixed;
	right: 0;
	bottom: 0;
	background: #606197;
	opacity: 0.6;
}
#page_top a{
	position: relative;
	display: block;
	width: 100px;
	height: 60px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -25px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
#page_top a::after{
	content: 'PAGE TOP';
	font-size: 13px;
	color: #fff;
	position: absolute;
	top: 30px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

footer{
	width:100%;
	border-top:6px solid #606197;
	padding: 20px 0 0;
}

footer .wrapper{
	display:block;
}
footer .logo {
	text-align: center;
	margin-bottom: 5px;
}
footer .logo img {
	height: 60px;
}
footer .nav {
	display: flex;
	flex-wrap: wrap;
	background-color: #d0d0e1;
	}
footer .nav li {
	border-bottom: 1px solid #fff;
	width:calc(100%/2);
	}
footer .nav li a {
	padding: 15px;
	color: #fff;
	text-decoration: none;
}
 
	footer .nav li a {
	padding: 12px 20px;
	display: block;
	background-size: 5px auto;
	}
 
	footer .nav li:nth-child(n) {
	border-right: 1px solid #fff;
	}
.copyright {
	background-color: #606197;
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 400;
	padding: 1px 5px;
	width:100%;
	text-align: center;
}

/* =================
ハンバーガーボタンの実装
================= */

.menu-btn {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	height: 50px;
	width: 50px;
	justify-content: center;
	align-items: center;
	z-index: 90;
	background-color: #d0d0e1;
}
.menu-btn:hover {
	cursor: pointer;
}
/* 三本線の実装 */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
	content: "";
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background-color: #ffffff;
	position: absolute;
}
.menu-btn span:before {
	bottom: 8px;
}
.menu-btn span:after {
	top: 8px;
}
/* チェックボックスを非表示にする */
#menu-btn-check {
	display: none;
}

#menu-btn-check:checked ~ .menu-btn span {
	background-color: rgba(
	255,
	255,
	255,
	0
	); /*メニューオープン時は真ん中の線を透明にする*/
}

/* メニューを開いている時はハンバーガーボタンが×になる */
#menu-btn-check:checked ~ .menu-btn span::before {
	bottom: 0;
	transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
	top: 0;
	transform: rotate(-45deg);
}

/* =================
メニュー部分の実装
================= */

.menu-content {
	z-index:80;
	width:75%;
	height: 100%;
	position: fixed;
	top:0;
	left:100%;
	background-color:#606197;
	transition: all 0.5s;
}
.menu-content ul {
	padding: 20px 10px 0;
}
.menu-content ul li {
	border-bottom: solid 1px #ffffff;
	list-style: none;
}
.menu-content ul li a {
	display: block;
	width: 100%;
	font-size: 15px;
	box-sizing: border-box;
	color: #ffffff;
	text-decoration: none;
	padding: 9px 15px 10px 0;
	position: relative;
}

#menu-btn-check:checked ~ .menu-content {
	left: 25%; /*メニューを画面内へ動かす*/
}
.menu-content .loginarea {
	width: 90%;
	margin: 20px auto;
	padding: 20px;
	display: block;
}
.menu-content .loginarea img {
	width: 100%;
}
.menu-content .loginarea ul{
	padding:10px 0 0;
}
.menu-content .loginarea ul li {
	border:none;
}
.menu-content .loginarea ul li a {
	display: contents;
	font-size: 1.1em;
	line-height: 1.5em;
	color: #039;
	text-decoration: underline;
}
.com_table {
    width: 95%;
margin:auto;
  }

.com_table table {
  margin: 10px auto 30px;
  width:100%;
}
.com_table th {
  background: #d0d0e1;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.com_table td {
border-bottom:1px solid #d0d0e1;
  padding: 10px;
}
.breadcrumb {
    padding: 5px 0;
}

.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb ul li {
    margin-right: 10px;
}

.breadcrumb ul li:after {
    content: ">";
    padding-left: 10px;
}
.breadcrumb ul li:last-child:after {
    content: none;
}
.mainv img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.mainv p {
    padding:5px;
}
.contentspage h3{
	width:100%;
	padding: 10px;
    background-image: radial-gradient(rgb(255, 255, 255) 16%, transparent 16%),radial-gradient(rgb(255, 255, 255) 16%, transparent 16%);
    background-position: 0px 0px,4px 4px;
    background-size: 8px 8px;
    background-color: #d0d0e18f;
    background-repeat: repeat;
}
.contentspage h4{
	color: #606197;
    font-weight: bold;
	font-size: 1.2em;
    margin: 5px 0;
}
.archive{
	display:flex;
	flex-wrap: wrap;
	margin:20px auto;
	justify-content: space-between;
	width: 95%;
}
.col2 .box{
	width:100%;
	margin:10px 0;
}
.col2 .box img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.col3 .box{
	width:calc(100%/2 - 10px);
	margin:10px 0;
}
.col3 .box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.box a.btn {
    margin: 10px auto;
    background-color: #606197;
    padding: 10px 30px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
}
.box a.btn:after {
    content: "";
    display: inline-block;
    position: relative;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -1px;
    margin-left: 1em;
}
.box a.btn:hover {
	opacity: 0.8;
}
.text-center {
    text-align: center;
}
.p-30{
	padding: 30px 0;
}
.col1 .box {
    width: 100%;
    margin: 10px 0;
    display: grid;
}
.col1 .box img {
    width: 100%;
}
.cslider .slick-next {
    right: 2%;
z-index: 2;
}
.cslider .slick-prev {
    left: 2%;
z-index: 3;
}
.about p {
    margin: 20px;
    line-height: 1.4em;
}
.about p {
    margin: 20px;
    line-height: 1.4em;
}
.about p span {
    font-size: 1.4em;
    font-weight: 600;
    color: #606197;
    line-height: 1.5em;
}

a.btn-flat {
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  display: table;
  padding: 1rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
  overflow: hidden;
  color: #fff;
  border-radius: 0;
  background: #77AE6A;
  margin: 20px auto;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-80%) translateY(-20%);
  transform: translateX(-80%) translateY(-20%);
  /*border-radius: 50%;*/
  background: #77AE6A;
}

a.btn-flat:hover:before {
  width: 400px;
  height: 400px;
  -webkit-transform: translateX(-1%) translateY(-175px);
  transform: translateX(-1%) translateY(-175px);
}
a.btn-flat span {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
a.btn.btn-flat svg {
    vertical-align: middle;
    display: table-cell;
    margin-left:5px;
}


@media screen and (max-width: 640px) {
.com_table th,
.com_table td {
	border:none;
    display: block;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
section {
	margin: 50px 0;
}
header .logo img {
	height: 80px;
}
h1 {
	background-color: #606197;
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 400;
	padding: 1px 5px;
	display: block;
}
.menu-content h1 {
	display: none;
}
.logo {
	margin: 0;
}
.menu-btn {
	display: none;
}
.menu-content {
	width: auto;
	height: auto;
	position: static;
	background-color: #ffffff;
	transition: all 0.5s;
}
.menu-content ul {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.menu-content ul li {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid #cccccc;
}
.menu-content ul li:first-child {
	border: none;
}
.menu-content ul li a {
	font-size: 1.0em;
	color: #039;
	text-decoration: underline;
	padding: 0;
}
.menu-content .loginarea {
	width: auto;
	margin: 5px 0 0 0;
	padding: 10px 10px 6px;
	display: flex;
}
.menu-content .loginarea ul{
	padding:0;
	display: block;
}
.slider .slick-next{
	right:19%;
}
.slider .slick-prev{
	left:19%;
}
.pickup ul li{
	width:calc(100%/2 - 10px);
}
.pickup img {
	height: 220px;
}
._a {
	width: 50%;
}
.theme ul li {
	width: calc(100%/4 - 10px);
}
.theme ul li a h3 {
	font-size: 1.1em;
}
.theme ul li img {
	height: 20vw;
	}
.about h3 {
	margin-left:0;	
}
.about .inner {
	padding: 20px;
	width:100%;
	}
.news-list .item a{
	flex-wrap: nowrap;
}
.news-list .item .title{
	margin: 0
}
footer{
	padding: 5px 0 0;
}
	footer .logo {
	padding: 10px 0;
	}
footer .wrapper{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

footer .cont {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	}

footer .nav {
	display: inline-block;
	background-color: #ffffff;
	}

footer .nav li {
	display: inline-block;
	border:none;
	width:auto;
	}
	
footer .nav li a {
	color: #039;
}

footer .nav li a:hover {
	color:#f63;
}
.snslink {
	top: 25%;
	right: 25px;
	width: 50px;
	position: fixed;
}
.snslink a{
	margin:0 0 10px 0;
}
.mainv img {
    height: 350px;
}
.col2 .box{
	width:calc(100%/2 - 10px);
	margin:10px 0;
}
.col2 .box img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.col3 .box{
	width:calc(100%/3 - 10px);
	margin:10px 0;
}
.col3 .box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.col1 .box img {
    width: 60%;
    margin: auto;
    height: 300px;
    object-fit: cover;
}
.about p span {
    font-size: 1.8em;
}
a.btn-flat {
  background: #5C5B9C;
  margin: 0px auto;
}
.slider img{
	height:428px;
}
}

.pc-only{
	display: block;
}
.sp-only{
	display: none;
}

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

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.proftxt {
    width: calc(70% - 10px);
}
.profimg {
    width: 30%;
}
.proftxt dl {
    display: flex;
    flex-wrap: wrap;
}
.proftxt dl dt {
    width: 30%;
    font-weight: 600;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
.proftxt dl dd {
    width: 70%;
    padding: 10px;
    line-height: 1.4;
    border-bottom: 1px dotted #ccc;
}
section.news {
    width: 70%;
}
section.sns {
    width: calc(30% - 10px);
}
.snslink {
	width: auto;
	position: static;
}
@media screen and (max-width: 768px){
	.flex {
		display: block;
	}
	.proftxt {
		width: 90%;
		margin: auto;
	}
	.profimg {
		width: 80%;
		margin: 10px auto;
	}
	.profimg img {
		width: 100%;
	}
	section.news {
		width: 100%;
		margin-top:60px;
	}
	section.sns {
		width: 100%;
	}
	}

/* 本文を隠す高さを指定 */
.more {
	position: relative;
	height: 250px;
	overflow: hidden;
  }
   
  /* もっと見るボタンで高さを自動に */
  .more.active {
	height: auto;
  }
   
  /* 透過グラデーションをposition指定 */
  .more::before {
	content: ""; 
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 90%);
	position: absolute;
	top: 20px;
	left: 0;
  }
   
  /* もっと見るボタンで透過グラデーションを解除 */
  .more.active::before {
	background: none;
  }

  .guide button {
    background: #fe00ba;
    color: #fff;
    padding: 5px 30px;
    border-radius: 50px;
    margin: 10px auto 0;
	position: absolute;
	left:50%;
	transform: translateX(-50%);
}