@charset "UTF-8";

@keyframes fadein {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade {
opacity: 0;
transform: translate(0, 45px);
transition: all 300ms;
}
.fade.effect-scroll {
opacity: 1;
transform: translate(0, 0);
animation-name: fadein;
animation-duration: 5s;
}  #body.column-fill {
width: 100%;
}
#body.column-fill #main {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
#body.column-2 #main{
margin-bottom: 30px;
}
@media screen and (min-width: 1200px) {
#body.column-2{
display: flex;
justify-content: space-between;
}
#body.column-2 #main{
width: 100%;
padding-right: 20px;
}
#body.column-2 #sidebar{
width: 100%;
max-width: 350px;
}
}  h2.ttl {
margin-bottom: 5rem;
text-align: center;
font-size: 3rem;
font-family: "UD黎ミン B", "UD Reimin Bold", serif;
}
#index_cover {
padding: 50px 0;
background: #004300;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
#index_cover img {
width: 100%;
height: auto;
}
#index_cover .wave {
opacity: .4;
position: absolute;
top: 3%;
right: 40%;
background: #f0f47c;
width: 1000px;
height: 1000px;
margin-left: -250px;
margin-top: -250px;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 3000ms infinite linear;
}
#index_cover .wave.-three {
animation: drift 5000ms infinite linear;
}
#index_cover .wave.-two {
animation: drift 7000ms infinite linear;
opacity: .1;
background: yellow;
}
#index_cover .cover {
width: 100%;
z-index: 1;
transform: translate3d(0, 0, 0);
}
@keyframes drift {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}
#index_about {
color: #232230;
background: #EFA8A8;
animation: gradationTest 20s infinite;
padding: 50px 30px;
}
#index_about p {
font-size: 1.6rem;
line-height: 2;
}
@keyframes gradationTest {
0% {
background-color: #EFA8A8;
}
40% {
background-color: #c3efa8;
}
60% {
background-color: #a8e8ef;
}
100% {
background-color: #EFA8A8;
}
} @media screen and (min-width: 750px) {
#index_about {
padding: 50px;
}
#index_about p {
font-size: 2rem;
line-height: 3;
}
} #index_service article .container {
padding: 50px 0;
color: #fff;
text-shadow: 3px 2px 3px #76591e;
}
#index_service article .container h2 {
font-size: 5rem;
text-align: center;
margin-bottom: 0;
}
#index_service article .container p {
font-size: 1.6rem;
}
#index_service .parallax {
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
}
#index_service .article01 {
background-image: url(//www.p2206.com/wp-content/themes/p2206_2019/img/bg_consulting.jpg);
}
#index_service .article02 {
background-image: url(//www.p2206.com/wp-content/themes/p2206_2019/img/bg_design.jpg);
}
#index_service .article03 {
background-image: url(//www.p2206.com/wp-content/themes/p2206_2019/img/bg_frontend.jpg);
} @media screen and (min-width: 780px) {
#index_service article .container {
display: flex;
justify-content: space-between;
height: 650px;
align-items: center;
}
#index_service article .container h2 {
font-size: 5rem;
width: 25%;
margin-bottom: 0;
}
#index_service article .container p {
font-size: 2rem;
width: 60%;
}
#index_service article:nth-child(even) .container {
flex-direction: row-reverse;
}
}
#index_blog {
background: #EFA8A8;
padding: 50px;
}
#index_blog div article {
margin-bottom: 10px;
background: #FFF;
animation-name: fadein;
animation-duration: 5s;
-webkit-transition: all .3s;
transition: all .3s;
}
#index_blog div article:hover {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
#index_blog div article a {
text-decoration: none;
}
#index_blog div article img {
width: 100%;
height: auto;
transition-duration: 0.3s;
}
#index_blog div article:hover img {
transform: scale(1.1);
}
#index_blog div article .txt_box {
padding: 20px;
} @media screen and (min-width: 750px) {
#index_blog div {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
#index_blog div article {
width: 30%;
margin: 0 calc(10% / 6) 30px;
}
}
#index_news {
padding: 50px 0;
background: #F3F3F3;
}
#index_news a {
display: block;
text-decoration: none;
}
#index_news dl {
margin-bottom: 10px;
font-size: 1.8rem;
position: relative;
}
#index_news dl dt {
padding: 10px 10px;
text-align: center;
background: #DEDBDB;
height: 100%;
}
#index_news dl dd {
padding: 10px 30px 10px 10px;
line-height: 1.4;
position: relative;
}
#index_news dl dd:after {
content: '\f054';
display: inline-block;
font-size: 15px;
font-family: "FontAwesome";
position: absolute;
right: 10px;
top: 20%;
} @media screen and (min-width: 750px) {
#index_news dl {
margin-bottom: 10px;
display: flex;
align-items: center;
}
#index_news dl dt {
width: 20%;
}
#index_news dl dd {
padding: 5px 30px;
width: 80%;
}
}
#index_contact {
padding: 50px 0;
}
#index_contact dl {
margin-bottom: 10px;
}
#index_contact dl dt {
font-size: 1.6rem;
} @media screen and (min-width: 750px) {
#index_contact {
padding: 50px 0;
}
#index_contact dl {
display: flex;
}
#index_contact dl dt {
width: 10%;
}
#index_contact dl dd {
width: 90%;
}
}   @media screen and (min-width: 750px) {
.modal-window {
transform: translate(0, 100%);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
line-height: 1.3;
display: none;
transition: opacity 0.4s;
}
.modal-window:target {
transform: translate(0, 0);
opacity: 1;
display: block;
}
.is-active.modal-window {
display: block;
}
.modal-window .modal-inner {
position: absolute;
top: 50px;
left: 50%;
z-index: 20;
margin-left: -250px;
width: 500px;
overflow-x: hidden;
border-radius: 2px;
background: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.modal-window .modal-inner p {
padding: 0 20px;
}
.modal-window .modal-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.modal-window .modal-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
}
.modal-window .modal-close:after {
content: '\00d7';
position: absolute;
top: 25px;
left: 50%;
z-index: 20;
margin-left: 285px;
background: #fff;
border-radius: 2px;
padding: 2px 8px;
font-size: 1.2em;
text-decoration: none;
text-indent: 0;
}
.modal-inner {
position: relative;
}
.modal-inner h1 {
position: absolute;
left: 50%;
top: 40%;
font-size: 4vw;
color: #fff;
font-weight: normal;
}
.modal-inner img {
width: 98%;
}
} @media screen and (max-width: 749px) {
.modal-close {
display: none;
}
}  .tl {
font-size: 3rem;
padding-left: 23px;
border-left: 4px solid #619fa2;
margin-bottom: 2rem;
}
.ttl {
font-size: 3rem;
text-align: center;
margin-bottom: 4rem;
}
.btn_share{
display: flex;
margin-bottom: 30px;
}
.btn_share li{
width: 100%;
}
.btn_share li a{
display: block;
height: 40px;
font-size: 0;
text-align: center;
}
.btn_share li a span{
width: 35px;
height: 35px;
display: block;
margin: 0 auto;
background-image: url(//www.p2206.com/wp-content/themes/p2206_2019/img/sns_set.png);
background-repeat: no-repeat; 
background-size:300% 300%;  
background-position: 0px 12px; 
}
.btn_share .btn_facebook{
background: #3D5A97;
}
.btn_share .btn_facebook span{
background-position: -40px 10px; 
}
.btn_share .btn_twitter{
background: #03AEEC;
}
.btn_share .btn_twitter span{
background-position: 0px -24px; 
}
.btn_share .btn_hatena{
background: #028EDD;
}
.btn_share .btn_hatena span{
background-position: 5px 12px; 
}
.btn_share .btn_pocket{
background: #EA4855;
}
.btn_share .btn_pocket span{
background-position: -40px -26px;
}
.btn_share .btn_line{
background: #00C100;
}
.btn_share .btn_line span{
background-position: 0px -70px; 
}   #main.content h1 {
font-size: 3rem;
font-weight: normal;
margin-bottom: 1rem;
clear: both;
}
#main.content h2 {
background: #EFA8A8;
color: #FFF;
font-size: 2.4rem;
margin:40px 0 20px;
font-weight: normal;
padding: 5px 10px;
clear: both;
}
#main.content h3 {
font-size: 2rem;
font-weight: normal;
border-bottom: 5px solid #EFA8A8;
padding: 5px 0;
margin:40px 0 20px;
color: #EFA8A8;
clear: both;
}
#main.content h4 {
font-size: 2rem;
margin:40px 0 20px;
clear: both;
}
#main.content h5 {
font-size: 2rem;
margin:40px 0 20px;
clear: both;
}
#main.content h6 {
font-size: 2rem;
margin:40px 0 20px;
clear: both;
}
#main.content strong {
padding: 0 5px;
background: #ad2525;
color: #FFF;
}
#main.content strong a{
color: #FFF;
}
#main.content p {
line-height: 1.5;
font-size: 1.8rem;
margin-bottom: 2.5rem;
}
#main.content em {
font-style: italic;
}
#main.content blockquote {
display: block;
background: #EEEEEE;
padding: 10px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
#main.content table{
width: 100%;
margin: 10px auto;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#main.content table th{
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #ccc;
}
#main.content table td{
padding: 10px;
border-bottom: 1px solid #ccc;
}
#main.content dl{
width: 100%;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
}
#main.content dl dt{
width: 20%;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #ccc;
}
#main.content dl dd{
width: 80%;
padding: 10px;
border-bottom: 1px solid #ccc;
}
#main.content article ul{
margin: 2rem 2rem 2rem 4rem;
}
#main.content article ul li{
list-style: disc;
font-size: 1.8rem;
}
#main.content article ol{
margin: 2rem 2rem 2rem 4rem;
}
#main.content article ol li{
list-style: decimal;
font-size: 1.8rem;
}
#main.content article del{
color:#ccc;
}
@media screen and (max-width: 768px) {
#main.content table,#main.content table tr,#main.content table tr th,#main.content table td,#main.content table tbody{
display: block;
}
#main.content table th{
width: 100%;
font-weight: bold;
border:none;
}
#main.content table td{
width: 100%;
border-bottom: 1px solid #ccc;
}
#main.content dl{
display: block;
}
#main.content dl dt{
width: 100%;
font-weight: bold;
border:none;
}
#main.content dl dd{
width: 100%;
border-bottom: 1px solid #ccc;
}
} .aligncenter {
display: block;
margin: 0 auto 20px;
}
.alignright {
float: right;
margin:0 0 20px 20px; 
}
.alignleft {
float: left;
margin:0 20px 20px 0; 
}
img[class*="wp-image-"],
img[class*="attachment-"] {
height: auto;
max-width: 100%;
}
.wp-pagenavi {
clear: both;
margin: 30px auto 30px;
text-align: center;
line-height: 1;
}
.wp-pagenavi a,
.wp-pagenavi span {
display: inline-block;
margin: 4px;
padding: 8px;
text-decoration: none;
background: #ccc;
color: #FFF;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
border-color: #EFA8A8;
}
.wp-pagenavi span.current {
background: #EFA8A8;
}  .breadcrumbs{
font-size: 1.2rem;
margin-bottom: 20px;
}
.breadcrumbs span{
padding-right: 5px;
}
#eye_catch {
margin-bottom: 38px;
text-align: center;
}
#pager{
display: flex;
justify-content: space-between;
margin:100px 0 40px;
}
#pager li{
width: 40%;
display: flex;
align-items: center;
position: relative;
background: #EFA8A8;
}
#pager li a{
color: #fff;
display: block;
text-decoration: none;
padding: 10px;
width: 100%;
align-items: center;
}
#pager li.prev{
padding-left: 10px;
}
#pager li.next{
padding-right: 10px;
}
#pager li .fas {
color: #FFF;
}
@media screen and (max-width: 450px) {
#pager{
display: block;
}
#pager li{
width: 100%;
border-bottom: 1px solid #fff;
}
}
#ranking {
background: #f5f5f5;
padding: 20px 30px 20px 30px;
margin: 0 0 30px 0;
counter-reset: ranking;   
}
#ranking article {
margin-bottom: 30px;
position: relative;
}
#ranking article .inner {
display: flex;
justify-content: space-between;
width: 100%;
}
#ranking article:before { 
counter-increment: ranking;
content: counter(ranking);
z-index: 1; 
position: absolute;
left: -10px;
top: -10px;
background: #D50D25;
color: #FFF;
display: block;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
text-align: center;
font-size: 1.4rem;
line-height: 1.7;
}
#ranking h2 {
font-size: 2.4rem;
text-align: center;
font-size: 2.4rem;
color: #666666;
margin-bottom: 28px;
width: 100%;
}
#ranking article .img {
max-width: 124px;
width: 50%;
padding-right: 10px;
}
#ranking article .txt_box {
width: 50%;
}
#ranking article h3 {
margin: 5px 0 20px;
font-size: 1.2rem;
font-weight: normal;
}
#ranking article h3 a {
text-decoration: none;
color: #666;
display: block;
}
#ranking article .cat {
font-size: 1.2rem;
}
#ranking article .cat a {
color: #ccc;
text-decoration: none;
}
@media screen and (min-width: 750px)and (max-width: 1200px){
#ranking {
display: flex;
flex-wrap: wrap;
}
#ranking article {
width: 50%;
}
#ranking article .img {
width: 100%;
}
#ranking article .txt_box {
width: 100%;
padding-right: 0;
}
}
#recently h2 {
font-size: 2rem;
text-align: center;
color: #fff;
margin-bottom: 30px;
background: #EFA8A8;
font-weight: normal;
padding: 10px;
}
#recently article {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
#recently article .img {
width: 38%;
}
#recently article .txt_box {
width: 60%;
padding-right: 10px;
}
#recently article h3 {
margin: 5px 0 20px;
font-size: 1.2rem;
font-weight: normal;
text-align: left;
}
#recently article h3 a {
text-decoration: none;
color: #666;
display: block;
}
#recently article .cat {
font-size: 1.2rem;
}
#recently article .cat a {
color: #ccc;
text-decoration: none;
}
@media screen and (min-width: 750px)and (max-width: 1200px) {
#recently {
display: flex;
flex-wrap: wrap;
}
#recently h2 {
width: 100%;
}
#recently article {
width: 50%;
}
#recently article .img {
width: 38%;
}
#recently article .txt_box {
width: 60%;
padding-right: 10px;
}
}
#cat_list{
margin-bottom: 30px;
}
#cat_list h2 {
font-size: 2rem;
text-align: center;
color: #fff;
margin-bottom: 30px;
background: #EFA8A8;
font-weight: normal;
padding: 10px;
}
#cat_list ul li{
border-bottom: 1px solid #ccc;
}
#cat_list ul li a{
display: block;
color: #666;
text-decoration: none;
padding: 10px;
position: relative;
}
#cat_list ul li a:after{
font-family: "FontAwesome";
font-weight: 900;
content: "\f054";
position: absolute;
right: 10px;
}
#cat_list ul li ul{
margin-left: 2rem;
border-left: 1px solid #ccc;
}
#cat_list ul li ul li{
border-top: 1px solid #ccc;
}
#cat_list ul li ul li:last-child{
border-bottom: none;
}   .lkc-internal-wrap{
background: #fff;
}
.lkc-title-text{
line-height: 1.5;
margin-bottom: 20px;
}
.lkc-url{
line-height: 1.5;
margin-bottom: 10px;
} .wp_rp_content{
border-top: 1px solid #ccc;
padding-top: 20px;
margin-bottom: 20px;
}
.related_post_title{
font-size: 1.6rem;
margin-bottom: 20px;
}
.related_post{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul.related_post li{
width: 48%;
margin-bottom: 20px !important;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.related_post li .wp_rp_thumbnail{
width: 45%;
padding-right: 10px;
}
.related_post li .wp_rp_title{
width: 55%;
text-decoration: none;
}
.wp_rp_category{
font-size: 1rem;
padding-top: 10px;
}
@media screen and (max-width: 450px) {
.related_post{
display: flex;
}
ul.related_post li{
width: 100%;
}
} #ez-toc-container p.ez-toc-title{
text-align: right;
width: 55%;
}
#ez-toc-container ul li a{
color:#EFA8A8;
padding: 10px 0;
display: block;
border-bottom: 1px solid #ccc;
}
#ez-toc-container{
border: 1px solid #ccc;
}   .cat_info {
margin-bottom: 60px;
}
.cat_info h1 {
text-align: center;
font-size: 1.6rem;
color: #666;
}
.cat_info h2 {
color: #265BA1;
font-weight: bold;
text-align: center;
font-size: 2rem;
margin-bottom: 20px;
}
.cat_info p {
font-size: 2rem;
}
.list_view article {
margin-bottom: 40px;
}
.list_view article h3 {
margin: 20px 0 20px;
}
.list_view article a {
text-decoration: none;
color: #666;
display: block;
}
@media screen and (min-width: 750px) {
.list_view {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list_view article {
width: 32%;
max-width: 280px;
margin-bottom: 80px;
}
.list_view article img {
width: 100%;
height: auto;
transition-duration: 0.3s;
}
.list_view article:hover img{
transform: scale(1.1);
}
.list_view:after {
content: "";
display: block;
width: 32%;
}
}  .search h1{
text-align: center;
font-size: 1.6rem;
margin-bottom: 30px;
color: #666;
}