#area h3 {
font-size: 25px;
font-weight: 700;
padding: 10px 5px;
border-bottom: solid 2px #014099;
border-top: solid 2px #014099;
margin-bottom: 20px;
display: inline-block;
line-height: 1;
width: 98.5%;
}
#area .flex a {
font-size: 16px;
color: #014099;
padding: 2px;
}
#area .border_r {
border-right: 3px solid #014099;
margin: 0px 6px 0 3px;
}
#area .border_r:last-child {
display: none;
}
#area .flex a:hover {
background-color: #014099;
color: #fff;
}
#area .flex {
margin-bottom: 40px;
display: flex;
text-align: justify;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 5px;
}
#area .flex div {
width: 11%;
border-left: 3px solid #014099;
height: 20px;
display: flex;
align-items: center;
margin: 0 5px 10px 0;
padding: 2px;
min-width: 90px;
}
#text {
display: none;
} .br768on {
display: none;
}
.br480on {
display: none;
}
.br375on {
display: none;
} .sp768on {
display: none;
}
.sp480on {
display: none;
}
.sp375on {
display: none;
}
@media screen and (max-width:768px) {
.br768off {
display: none;
}
.sp768off {
display: none;
}
.br768on {
display: block;
}
.sp768on {
display: block;
}
}
@media screen and (max-width:480px) {
.br480off {
display: none;
}
.sp480off {
display: none;
}
.br480on {
display: block;
}
.sp480on {
display: block;
}
#area h3 {
font-size: 20px;
padding: 7px 5px;
width: 97.5%;
}
#area .flex p,
#area .flex a {
font-size: 14px;
}
#area .flex div {
height: 15px;
}
}
@media screen and (max-width:375px) {
.br375off {
display: none;
}
.sp375off {
display: none;
}
.br375on {
display: block;
}
.sp375on {
display: block;
}
} .widget_categories {
border: 3px solid #024098;
color: #fff;
}
#custom-post-type-categories-2 .widget-title, #custom-post-type-categories-3 .widget-title {
color: #010079;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
border-bottom: 0px;
border-left: 0px;
margin: 0 0 0 0;
}
#custom-post-type-categories-2 .cat-item, #custom-post-type-categories-3 .cat-item {
margin: 0;
}
#custom-post-type-categories-2 .cat-item a, #custom-post-type-categories-3 .cat-item a {
display: block;
padding: 1% 2%;
}
#top_blog {
padding-top: 0;
}
#top_blog .blog_title {
background-color: #033594;
text-align: center;
padding: 1%;
}
#top_blog .blog {
border: 2px solid #033594;
padding: 5%;
}
#top_blog .blog ul li {
font-size: 16px;
border-bottom: 1px solid #014099;
margin: 0 0 10px 0;
padding: 5px;
}
#top_blog .blog ul li:hover {
font-weight: bold;
}
#top_blog .blog ul li a {
color: #014099;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
display: inline-block;
height: 50px;
}
#top_blog .blog .blog_btn a {
color: #fff;
display: block;
width: 40%;
padding: 20px 0;
background-color: #033594;
text-align: center;
margin: 5% auto 0;
}
#top_blog .blog .blog_btn a:hover {
background-color: #fff;
color: #033594 !important;
border: 1px solid #033594;
}
#custom-post-type-archives-4 [name="archive-dropdown"], [name="maker"], [name="select"], #custom-post-type-archives-5 [name="archive-dropdown"] {
margin: 3% 0;
width: 100%;
height: 32px;
padding: 4px 6px;
border-radius: 4px;
font-size: 16px;
max-width: 350px;
}  .line img {
width: 100%;
vertical-align: middle;
}
section.line_sec {
padding: 0 0 70px;
}
.line_sec h2 {
position: relative;
padding: 10px 1.9%;
background: #014099;
color: white;
margin: 0 0 60px;
font-size: 37.5px;
font-weight: bold;
}
.line_sec h2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 25px transparent;
border-right: solid 40px rgb(112, 124, 146);
}
.line_flex {
display: flex;
}
.line_container {
max-width: 1200px;
margin: auto;
width: 95%;
}
.line_ttl {
background: #00be22;
margin: 0 0 4px;
font-size: 27px;
text-align: center;
font-weight: bold;
color: #fff;
}
.line_flex .box {
width: 32%;
}
.box .box_content {
padding: 24px;
background: #eff2f3;
position: relative;
}
.box .box_content::after {
content: url(//protona.jp/wp-content/themes/twentyseventeen/image/line_arrow.png);
position: absolute;
right: -14px;
top: 56.1%;
}
.box:last-child .box_content::after {
content: "";
}
.line_flex .box:nth-last-child(2) {
margin: 0 2%;
}
.line_flex .box .text {
font-size: 16px;
margin: 0 0 16px;
font-weight: bold;
min-height: 48px;
}
@media screen and (max-width:1200px) {
.line_flex .box .text {
font-size: 13px;
}
}
@media screen and (max-width:960px) {
.line_sec h2 {
font-size: 30px;
}
.line_flex .box .text {
min-height: 60px;
}
}
@media screen and (max-width:768px) {
.line_sec h2 {
font-size: 24px;
margin: 0 0 40px;
}
.line_sec h2::before {
border-bottom: solid 3.2vw transparent;
border-right: solid 5.2vw rgb(112, 124, 146);
}
.line_ttl {
font-size: 18px;
}
.box .box_content {
padding: 10px;
}
.line_flex .box .text {
font-size: 11px;
min-height: 51px;
}
}
@media screen and (max-width:600px) {
.line_sec h2 {
font-size: 4vw;
margin: 0 0 40px;
}
.line_ttl {
font-size: 3vw;
}
.line_flex .box .text {
font-size: 10px;
min-height: 45px;
}
}
@media screen and (max-width:480px) {
.line_flex {
display: block;
}
section.line_sec{
padding: 0 0 7%;
}
.line_flex .box {
width: 100%;
margin: 0 0 7%;
}
.line_flex .box:nth-last-child(2) {
margin: 0 0 7%;
}
.line_sec h2 {
font-size: 16px;
margin: 0 0 40px;
}
.line_sec h2::before {
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(112, 124, 146);
}
.line_ttl {
font-size: 14px;
padding: 10px 0;
}
.box .box_content {
padding: 25px 10%;
}
.box .box_content::after {
content: url(//protona.jp/wp-content/themes/twentyseventeen/image/line_arrow2.png);
left: 0;
right: 0;
text-align: center;
top: 99.6%;
}
.line_flex .box .text {
font-size: 12px;
min-height: inherit;
}
}  .line_top {
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/line_topbg.png);
background-size: cover;
background-position: right;
padding: 24px 0 14px 3.5%;
}
.line_topcontainer {
display: flex;
}
.line_top .textbox {
max-width: 550px;
}
.line_top h1 {
display: flex;
align-items: center;
font-size: 45.5px;
font-size: 3.1vw;
justify-content: center;
border: 5px solid #09c02a;
border-radius: 20px;
background: #fff;
padding: 0 1.7% 0;
max-width: 540px; width: 100%;
max-height: 80px;
margin: 0 auto 17px;
}
.line_top h1 span {
color: #09c02a;
}
.line_top .line_intro {
font-size: 21px;
font-size: 1.46vw;
width: 96%;
max-width: 513px;
line-height: 1.2;
}
.line_top .line_intro .text2 {
background: linear-gradient(transparent 80%, #fff15a 0%);
margin: 0 0 27px;
}
.line_top .line_intro .text2 span {
color: #09c02a;
}
.line_top .line_id {
display: flex;
font-size: 24px;
font-size: 1.68vw;
max-width: 365px;
}
.line_top .id_text>p {}
.line_top .id_text>p span {
color: #09c02a;
}
.line_top .line_id .box {
display: flex;
align-items: center;
border: 3px solid #09c02a;
border-radius: 10px;
background: #fff;
max-width: 235px;
max-height: 68px;
height: 7vw;
padding: 0 0 0 4.2%;
}
.line_top .line_id .box .imgbox {
max-width: 45px;
width: 4.5vw;
}
.line_top .line_id .box p {
margin: 0 0 0 4.2%;
}
.line_top .line_id .id_qr {
max-width: 100px;
margin: 0 0 0 4.6%;
width: 10.5vw;
}
.line_topcontainer>.imgbox {
width: 21.6%;
min-width: 200px;
margin: 78px 0 0 0;
transform: translateX(-80px);
display: flex;
align-items: flex-end;
}
@media screen and (min-width:1441px) {
.line_top h1 {
font-size: 45.5px;
}
.line_top .line_intro {
font-size: 21px;
}
.line_top .line_id {
font-size: 24px;
}
}
@media screen and (max-width:960px) {
.line_top {
background-size: cover;
background-position: center;
}
.line_top h1 {
border: 5px solid #09c02a;
border-radius: 10px;
font-size: 27px;
}
.line_topcontainer>.imgbox {
transform: translateX(-50px);
}
.line_top .line_intro {
font-size: 14px;
width: 100%;
}
}
@media screen and (max-width:768px){
.line_topcontainer {
display: block;
padding: 33% 0 0 0;
position: relative;
}
.line_top {
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/line_topbgsp.png);
background-color: #e7ebee;
background-size: 70%;
background-position: top;
background-repeat: no-repeat;
padding: 0;
}
.line_top h1 {
max-width: initial;
width: 92%;
max-height: 80px;
margin: 0 auto 17px;
font-size: 7vw;
border: 1vw solid #09c02a;
}
.line_top .line_intro {
font-size: 3.7vw;
width: 95%;
margin: auto;
max-width: initial;
}
.line_top .textbox {
max-width: initial;
width: 95%;
margin: auto;
padding: 0 0 70px;
}
.line_top .line_id .box {
border: 0.6vw solid #09c02a;
border-radius: 2vw;
}
.line_top .line_id {
font-size: 3.6vw;
width: 60%;
margin: 0% 0px 0 4%;
max-width: initial;
}
.line_topcontainer>.imgbox {
transform: none;
position: absolute;
right: 10%;
top: 72%;
margin: auto;
min-width: initial;
width: 30%;
}
.line_top .line_id .id_qr {
max-width: 200px;
margin: 0 0 0 4.6%;
width: 13.5vw;
}
}
@media screen and (max-width:376px) {
.line_top .line_intro {
font-size: 3.3vw;
width: 95%;
margin: auto;
max-width: initial;
}
.line_top .line_id {
font-size: 3.4vw;
}
}  .line_sec01 {
margin: 56px 0 0;
}
@media screen and (max-width: 480px) {
.line_sec01 .line_flex .box:last-child{
margin: 0;
}
}  .line_sec02 .line_flex {
margin: 0 0 35px;
}
.line_caution {
width: 100%;
font-size: 37.5px;
color: #fff;
background: #014099;
font-weight: bold;
}
.line_caution p {
padding: 35px 10%;
line-height: 1.2;
}
.line_caution .text1 {
background: #fff15a;
color: #014099;
}
.line_caution .text2 {
color: #fe7a32;
background: linear-gradient(transparent 80%, #fff15a 0%);
}
@media screen and (max-width:960px) {
.line_caution {
font-size: 3.9vw;
}
}
@media screen and (max-width:768px) {
.line_caution p {
padding: 4% 6%;
line-height: 1.2;
font-size: 3.3vw;
}
}
@media screen and (max-width:480px) {
.line_caution {
font-size: 14px;
}
.line_caution p {
padding: 20px 4%;
}
}  .line_sec03 .line_container>p {
font-size: 24px;
margin: 0 0 30px;
}
.line_sec03 .line_container>p .text1 {
max-width: 150px;
width: 30%;
text-align: center;
max-height: 50px;
margin: 0 1% 0 0;
display: inline-block;
font-size: 30px;
color: #fff;
background: #00be22;
}
.line_sec03 .line_container>p .text2 { border-bottom: 5px solid #fe7a32;
}
.line_sec03 .box .box_content::after {
content: '';
}
.line_sec03 .line_flex .box .text {
min-height: 72px;
}
@media screen and (max-width:960px) {
.line_sec03 .line_flex .box .text {
min-height: 80px;
}
}
@media screen and (max-width:768px) {
.line_sec03 .line_container>p {
font-size: 2.5vw;
margin: 0 0 30px;
}
.line_sec03 .line_container>p .text1 {
width: 14%;
font-size: 3vw;
}
.line_sec03 .line_flex .box .text {
min-height: 75px;
}
}
@media screen and (max-width:480px) {
.line_sec03 .line_flex .box:last-child{
margin: 0;
}
.line_sec03 .line_container>p .text1 {
width: 20%;
font-size: 14px;
min-width: 60px;
}
.line_sec03 .line_container>p {
font-size: 14px;
margin: 0 0 30px;
}
}  .line_sec04 .line_container>p {
font-size: 25px;
margin: 0 0 25px 2%;
}
.line_list {
padding: 0 2%;
}
.line_list li {
display: flex;
font-size: 25px;
font-weight: bold;
margin: 0 0 25px;
}
.line_list li .number {
color: #fff;
background: #00be22;
min-width: 30px;
max-height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.line_list li .text {
margin: 0 0 0 2%;
}
@media screen and (max-width:768px) {
.line_sec04 .line_container>p {
font-size: 3.2vw;
}
.line_list li {
font-size: 3vw;
}
}
@media screen and (max-width:480px) {
.line_sec04 .line_container>p {
font-size: 14px;
margin: 0 0 25px 2%;
}
.line_list li {
font-size: 12px;
}
.line_list li .number {
min-width: 25px;
max-height: 25px;
}
}   .discard{
padding-bottom: 0;
}
.discard__title{
text-align: center;
}
.discard__inner{
background-color: #fff;
border: 1px solid #d2d2d2;
padding: 3%;
margin: 5% 0 0;
min-width: 810px;
}
.discard__head-text{
font-size: 20px;
}
.discard__list{
margin-top: 2%;
}
.discard__list-item + .discard__list-item{
margin-top: 2%;
}
.discard__list-item a{
transition: .3s;
font-size: 16px;
}
.discard__list-item a:hover{
opacity: 0.6;
}
@media screen and (max-width: 960px){
.discard__inner{
min-width: inherit;
}
.discard__head-text{
font-size: 16px;
margin:0 0 4%;
}
.discard__list{
margin-top: 4%;
}
.discard__list-item + .discard__list-item{
margin-top: 4%;
}
.discard__list-item a{
transition: .3s;
font-size: 14px;
}
.discard__list-sub-head{
font-size: 14px;
}
} .area-info{
padding-top: 0;
}
.area-info__title{
text-align: center;
}
.area-info__image{
max-width: 800px;
width: 100%;
margin: auto;
}
.area-info__text{
font-size: 18px;
color: red;
} .accordion {
border: 1px solid #ccc;
margin: 20px auto;
border-radius: 5px;
overflow: hidden;
} .accordion__item {
border-bottom: 1px solid #fff;
} .accordion__header {
background: #014099;
color: #fff;
padding: 2% 3%;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
position: relative;
}
.accordion__header:hover {
background: #005a99;
} .accordion__header.active {
background: #0074d9;
} .accordion__header::before,
.accordion__header::after{
content: '';
position: absolute;
top: 0;
bottom: 0;
background-color: #fff;
margin: auto;
transition: 0.3s;
}
.accordion__header::before{
height: 3px;
width: 20px;
right: 10px;
}
.accordion__header::after{
height: 20px;
width: 3px;
right: 18px;
}
.accordion__header.active::before{
transform: rotate(180deg);
}
.accordion__header.active::after{
transform: rotate(-270deg);
} .accordion__content {
display: none;
background: #f9f9f9;
padding: 2.5% 3.4%;
overflow: hidden;
}
.accordion__content-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 16px;
}
.accordion__content-list-item {
font-size: 18px;
}
@media screen and (max-width: 960px){
.area-info__text{
font-size: 16px;
}
.accordion__header {
font-size: 18px;
}
.accordion__content-list-item {
font-size: 14px;
}
} @media screen and (min-width: 961px) {
.navbox .dropdownMaker .flex-center {
display: flex;
justify-content: center;
align-items: center;
}
}