body{
font-family: "s_m";
opacity: 0;
transition: 0.5s;
padding-top: 151px;
}
body.show{
opacity: 1;
}
#toTop {
opacity: 0;
visibility: hidden;
width: 5vw;
height: 5vw;
min-width: 50px;
min-height: 50px;
max-height: 60px;
max-width: 60px;
background-color: #023594;
border-radius: 10px;
position: fixed;
bottom: 1%;
right: 1%;
transition: 0.3s;
z-index: 1;
}
#toTop.show{
opacity: 1;
visibility: visible;
}
#toTop:hover{
opacity: 0.6;
}
#toTop span{
display: block;
position: relative;
height: 100%;
}
#toTop span::before{
content: '';
width: 40%;
height: 40%;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
transform: rotate(-45deg);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
} #product_shousai .detail-table{
border-top: 2px solid #014099;
border-right: 2px solid #014099;
border-bottom: 2px solid #014099;
}
#product_shousai .detail-table .table-item{
display: table;
width: 100%;
}
#product_shousai .detail-table .table-item .item-name{
width: 20%;
min-width: 150px;
padding: 0 0 0 10px;
background-color: #004199;
display: table-cell;
border-bottom: 1px solid #fff;
}
#product_shousai .detail-table .table-item .item-name p{
color: #fff;
}
#product_shousai .detail-table .table-item .item-text{
width: 100%;
background-color: #fff;
position: relative;
padding: 10px;
display: table-cell;
border-bottom: 1px solid #024199;
word-break: break-all;
}
#product_shousai .detail-table .table-item:last-child .item-name,
#product_shousai .detail-table .table-item:last-child .item-text{
border-bottom: 0px solid ;
}
#product_shousai .detail-table .table-item .color-price {
display: flex;
} .purchase-list{
}
.purchase-list .sec-ttl{
margin-bottom: 3%;
text-align: center;
}
.purchase-list .sec-ttl p{
font-size: 120%;
}
.purchase-list .link{
text-align: right;
margin: 5px 0;
}
.purchase-list .link a{
border-bottom:1px solid;
transition: 0.3s;
}
.purchase-list .link a:hover{
opacity: 0.6;
}
.purchase-list .purchase-list-box{
overflow: auto;
border-right: 2px solid #024199;
border-left: 2px solid #024199;
border-bottom: 2px solid #024199;
}
.purchase-list .purchase-list-box .list-table{
width: 100%;
min-width: 500px;
}
.purchase-list .purchase-list-box .list-table tr{
border-top: 1px solid #024199;
}
.purchase-list .purchase-list-box .list-table tr:first-child{
background-color: #004199;
}
.purchase-list .purchase-list-box .list-table th,
.purchase-list .purchase-list-box .list-table td{
padding: 5px 10px;
}
.purchase-list .purchase-list-box .list-table tr:first-child th,
.purchase-list .purchase-list-box .list-table tr:first-child td{
color: #fff;
text-align: center;
padding: 10px;
}
.purchase-list .purchase-list-box .list-table tr:first-child td{
border-left:1px solid #fff;
}
.purchase-list .purchase-list-box .list-table th{
min-width: 120px;
}
.purchase-list .purchase-list-box .list-table td{
border-left: 1px solid #024199;
min-width: 230px;
}
.purchase-list .purchase-list-box .list-table td:last-child{
min-width: 150px;
}
.purchase-list .purchase-list-box .list-table td a{
color: #024199;
display: inline-block;
transition: 0.3s;
border-bottom:1px solid transparent;
}
.purchase-list .purchase-list-box .list-table td a:hover{
border-bottom:1px solid;
}
@media (max-width:768px){
.purchase-list .purchase-list-box .list-table th,
.purchase-list .purchase-list-box .list-table td {
font-size: 18px;
}
body {
padding-top: 106px;
}
}
@media (max-width:480px){
.purchase-list .purchase-list-box .list-table th,
.purchase-list .purchase-list-box .list-table td {
font-size: 18px;
}
} #header_wrap {
position: fixed;
width: 100%;
z-index: 20;
top: 0;
}
#top_header {
padding-top: 10px;
}
#top_header .logo_box {
width: 10%;
}
#top_header .logo_box .logo_text {
font-size: 1.3vw;
}
.phone_box a {
font-size: 28px;
}
#g_nav .navbox .dropdown, .navbox a li {
height: 45px;
font-size: 15px;
}
.box_left p {
font-size: 12px;
}
.top_right_box {
display: block;
}
.top_right_box .center {
text-align: center;
font-size: 15px;
line-height: 1.6;
margin-bottom: 1%;
}
.top_right_box .flex {
display: flex;
}
#header_wrap .sns_box {
display: none;
}
#section4-2 .textbox p, #section4-2 .txt_center, .stei_up p {
font-size: 20px;
}
@media screen and (max-width: 768px) {
.top_right_box {
display: none;
}
#header_wrap .sns_box {
display: block;
flex: 0 0 25%;
margin-right: 10px;
}
#header_wrap .sns_box {
display: block;
flex: 0 0 45%;
margin-right: 10px;
}
#header_wrap .sns_box .flex_box {
display: flex;
justify-content: center;
}
#header_wrap .sns_box a {
display: block;
flex: 0 0 18%;
margin-right: 6%;
}
#header_wrap .sns_box a:last-child {
margin-right: 0;
}
#header_wrap .sns_box a .img {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
padding: 50% 0;
}
#header_wrap .sns_box .small {
font-size: 10px;
transform: scale(.8);
margin-top: 4%;
}
#header_wrap .sns_box .small span {
white-space: nowrap;
}
}
@media screen and (max-width: 480px) {
body {
padding-top: 84px !important;
}
.top_text2 {
margin-top: 30px;
}
.main_visual {
padding: 25px 10px;
}
.main_visual h2 {
margin-top: 70px;
font-size: 5.2vw;
}
#product_shousai .detail-table .table-item .item-name {
min-width: 110px;
font-size: 13px;
}
#product_shousai .common_h3 {
color: #eb8698 !important;
}
.reason_text {
font-size: 18px;
}
.note {
width: 90%;
}
#section4-2 .textbox p,
#section4-2 .txt_center,
.stei_up p {
font-size: 18px;
} #section4 .step p {
font-size: 15px;
}
#header_wrap .sns_box {
display: block;
flex: 0 0 45%;
margin-right: 10px;
}
#header_wrap .sns_box {
display: block;
flex: 0 0 45%;
margin-right: 10px;
}
#header_wrap .sns_box .flex_box {
display: flex;
justify-content: center;
}
#header_wrap .sns_box a {
display: block;
flex: 0 0 18%;
margin-right: 6%;
}
#header_wrap .sns_box a:last-child {
margin-right: 0;
}
#header_wrap .sns_box a .img {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
padding: 50% 0;
}
#header_wrap .sns_box .small {
font-size: 10px;
margin-top: 0;
}
#header_wrap .sns_box .small span {
white-space: nowrap;
}
#top_header .logo_box {
min-width: 135px;
}
#top_header .logo_box .logo_text {
font-size: 13px;
}
.flow_text p{
font-size: 18px;
}
.main_visual .title_flex {
position: relative;
}
.main_visual .title_flex .photobox {
position: absolute;
bottom: -5.5vw;
}
.main_visual .title_flex .photobox:first-child {
left: 0;
}
.main_visual .title_flex .photobox:last-child {
right: 0;
}
.main_visual h1 {
font-size: 6.8vw;
}
.main_visual .title_flex .title_inner_flex h1 {
line-height: 1.4;
}
.main_visual .title_flex .title_inner_flex {
width: 35%;
justify-content: space-between;
}
#product .product_list td a {
color: #eb8698 !important;
}
}
#cam_mainVisual img{
width: 100%;
}
@media screen and (max-width: 640px) {
#cam_mainVisual .pc {
display: none
}
}
@media screen and (min-width: 641px) {
#cam_mainVisual .sm {
display: none
}
}
.cam-linkBtn{
text-align: center;
margin: 100px auto;
}
@media screen and (max-width: 640px) {
.cam-linkBtn{
margin: 40px auto;
}
}
.cam-linkBtn a{
display: inline-block;
padding: 20px 120px 20px 80px;
font-size: 32px;
color: #fff;
background-color: #FF6600;
box-shadow: 12px 12px 0 #EADDD5;
position: relative;
border: 4px solid #FF6600;
}
@media screen and (max-width: 640px) {
.cam-linkBtn a{
font-size: 24px;
padding: 20px 90px 20px 40px;
}
}
.cam-linkBtn a:after{
content: url(//protona.jp/wp-content/themes/twentyseventeen/image/campaign/right-arrow.png);
position: absolute;
top: 50%;
right: 20px;
margin: auto;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.cam-linkBtn a:hover{
background-color: #fff;
color: #FF6600;
border: 4px solid #FF6600;
}
#cam-worries{
background-color: #014099;
background-image: url(//protona.jp/wp-content/themes/twentyseventeen/image/campaign/hatena-deco.png);
background-position: center 0;
background-repeat: no-repeat;
}
@media screen and (max-width: 640px) {
#cam-worries{
background-size: 60%;
}
}
#cam-worries .wrap{
width: 1100px;
max-width: 98%;
margin: 0 auto;
}
#cam-worries .top-box{
margin-top: 30px;
}
#cam-worries h2{
font-size: 38px;
color: #fff;
text-align: center;
}
@media screen and (max-width: 640px) {
#cam-worries h2{
font-size: 18px;
margin-bottom: 20px;
}
}
#cam-worries h2 span{
font-size: 66px;
display: inline-block;
position: relative;
}
@media screen and (max-width: 640px) {
#cam-worries h2 span{
font-size: 30px;
}
}
#cam-worries h2 span:before{
content: '';
background-image: url(//protona.jp/wp-content/themes/twentyseventeen/image/campaign/worries-deco.png);
position: absolute;
top: -8px;
right: -30px;
margin-bottom: 40px;
width: 40px;
height: 34px;
background-size: cover;
}
@media screen and (max-width: 640px) {
#cam-worries h2 span:before{
width: 20px;
height: 17px;
right: -14px;
}
}
#cam-worries h2 span:after{
content: '';
background-image: url(//protona.jp/wp-content/themes/twentyseventeen/image/campaign/worries-border.png);
position: absolute;
bottom: -5px;
right: 0;
left: 0;
margin: auto;
width: 100%;
height: 13px;
background-size: cover;
}
@media screen and (max-width: 640px) {
#cam-worries h2 span:after{
height: 8px;
}
}
#cam-worries .top-box .pic-box{
text-align: center;
}
#cam-worries .top-box img{
position: relative;
bottom: -20px;
width: 80%;
}
@media screen and (max-width: 640px) {
#cam-worries .top-box img{
bottom: 0;
}
}
@media screen and (max-width: 640px) {
#cam-worries .pc {
display: none;
}
}
@media screen and (min-width: 641px) {
#cam-worries .sm {
display: none;
}
}
#cam-worries .bottom-box{
background-color: #fff;
border-radius: 10px;
position: relative;
padding: 60px 40px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box{
padding: 225px 10px 25px;
}
}
@media screen and (max-width: 450px) {
#cam-worries .bottom-box{
padding: 180px 10px 25px;
}
}
@media screen and (max-width: 400px) {
#cam-worries .bottom-box{
padding: 150px 10px 25px;
}
}
#cam-worries .bottom-box h3{
position: relative;
top: -90px;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box h3{
position: absolute;
top: -45px;
}
}
#cam-worries .bottom-box h3 img{
width: 90%;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box h3 img{
width: 100%;
}
}
#cam-worries .bottom-box .inner{
border: 5px solid #FF6600;
border-radius: 5px;
position: relative;
padding: 45px 30px 40px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box .inner{
border: 2px solid #FF6600;
padding: 25px 10px 30px;
}
}
#cam-worries .bottom-box h4{
font-size: 30px;
position: absolute;
top: -38px;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box h4{
font-size: 18px;
top: -25px;
}
}
#cam-worries .bottom-box h4 span{
border-radius: 50px;
padding: 10px 50px;
background-color: #FF6600;
color: #fff;
display: inline-block;
}
#cam-worries .bottom-box dl{
display: flex;
align-items: center;
border-bottom: 2px solid #000000;
padding: 20px 0;
}
#cam-worries .bottom-box dt{
margin-right: 20px;
display: flex;
align-items: center;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box dt{
margin-right: 10px;
}
}
#cam-worries .bottom-box dt img{
width: 48px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box dt img{
width: 28px;
}
}
#cam-worries .bottom-box dd{
font-size: 20px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box dd{
font-size: 16px;
}
}
#cam-worries .bottom-box .text{
text-decoration: underline;
font-size: 20px;
margin-top: 20px;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box .text{
font-size: 16px;
}
}
#cam-worries .bottom-box .note{
font-size: 20px;
color: red;
}
@media screen and (max-width: 640px) {
#cam-worries .bottom-box .note{
font-size: 16px;
}
}
.cam-item{
background-color: #F7F7F7;
}
.cam-item .wrap{
width: 1200px;
margin: 0 auto;
max-width: 98%;
}
@media screen and (max-width: 640px) {
.cam-item .wrap{
width: 100%;
margin: 30px auto 0;
}
}
.cam-item h2{
color: #014099;
font-size: 53px;
text-align: center;
}
@media screen and (max-width: 640px) {
.cam-item h2{
font-size: 35px;
}
}
.cam-item .maker{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 80px;
margin-top: 40px;
}
@media screen and (max-width: 640px) {
.cam-item .maker{
margin-bottom: 35px;
margin-top: 25px;
}
}
.cam-item .maker li{
font-size: 20px;
padding: 5px 35px;
border-radius: 50px;
border: 3px solid #014099;
margin: 10px;
cursor:pointer;
background-color: #fff;
}
@media screen and (max-width: 640px) {
.cam-item .maker li{
font-size: 15px;
margin: 5px;
}
}
.cam-item .maker li:last-child{
margin-right: 0;
}
.cam-item .item{
width: 1000px;
margin: 0 auto;
max-width: 98%;
}
.cam-item .item h3{
color: #014099;
background-color: #E8F1FF;
padding: 10px 15px;
font-size: 30px;
}
@media screen and (max-width: 640px) {
.cam-item .item h3{
font-size: 25px;
}
}
.cam-item .item p{
background-color: #fff;
padding: 20px;
font-size: 18px;
}
.cam-item .item-content{
display: none;
}
.cam-item .maker .active{
color: #fff;
background-color: #014099;
border: 3px solid #014099;
}
.cam-item .active{
display: block;
}
.item-content .item{
margin-bottom: 80px;
}
@media screen and (max-width: 640px) {
.item-content .item{
margin-bottom: 40px;
}
}
.item-content h4{
font-size: 30px;
color: #014099;
border-bottom: 3px solid #014099;
margin: 60px auto 30px;
}
@media screen and (max-width: 640px) {
.item-content h4{
font-size: 20px;
margin: 40px auto 20px;
}
}
.item-content li{
display: flex;
border-top: 2px solid #014099;
border-left: 2px solid #014099;
}
@media screen and (max-width: 640px) {
.item-content li{
display: block;
}
}
.item-content li:last-child{
border-bottom: 2px solid #014099;
}
.item-content li .box{
width: 30%;
background-color: #fff;
text-align: center;
border-right: 2px solid #014099;
}
@media screen and (max-width: 640px) {
.item-content li .box{
width: 100%;
}
}
.item-content li .first{
width: 40%;
}
@media screen and (max-width: 640px) {
.item-content li .first{
width: 100%;
}
}
@media screen and (max-width: 640px) {
.item-content li .second dl{
display: flex;
align-items: center;
border-bottom: 2px solid #014099;
}
}
.item-content li .second dd{
line-height: 200px;
}
@media screen and (max-width: 750px) {
.item-content li .second dd{
line-height: 140px;
}
}
@media screen and (max-width: 640px) {
.item-content li .second dt{
width: 50%;
}
}
@media screen and (max-width: 640px) {
.item-content li .second .midashi{
border-bottom: 0;
border-right: 2px solid #014099;
}
}
@media screen and (max-width: 640px) {
.item-content li .second dd{
width: 50%;
line-height: 0;
}
}
.item-content li .first .inner dl{
display: flex;
}
@media screen and (max-width: 640px) {
.item-content li .first .inner dl{
border-bottom: 2px solid #014099;
}
}
.item-content li .first .inner dt{
width: 50%;
border-right: 2px solid #014099;
}
.item-content li .first .inner dd{
width: 50%;
line-height: 200px;
}
@media screen and (max-width: 750px) {
.item-content li .first .inner dd{
line-height: 140px;
}
}
@media screen and (max-width: 640px) {
.item-content li .first .inner dd{
line-height: 100px;
}
}
.item-content li .first .thumbnail {
width: 80%;
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
}
@media screen and (max-width: 750px) {
.item-content li .first .thumbnail {
height: 140px;
}
}
@media screen and (max-width: 640px) {
.item-content li .first .thumbnail {
height: 100px;
}
}
.item-content li .midashi{
font-size: 18px;
background-color: #E8F1FF;
color: #014099;
text-align: center;
padding: 15px 10px;
border-bottom: 2px solid #014099;
box-sizing: border-box;
}
@media screen and (min-width: 640px) {
.item-content li:not(:first-child) .midashi{
display: none;
}
}
.item-content li dd{
font-size: 16px;
}
@media screen and (max-width: 640px) {
.item-content li .price dl{
display: flex;
}
}
@media screen and (max-width: 640px) {
.item-content li .price dt{
width: 50%;
}
}
@media screen and (max-width: 640px) {
.item-content li .price .midashi{
border-bottom: 0;
border-right: 2px solid #014099;
}
}
.item-content li .price dd{
font-size: 22px;
padding: 60px 10px;
}
@media screen and (max-width: 750px) {
.item-content li .price dd{
font-size: 16px;
padding: 35px 10px;
}
}
@media screen and (max-width: 640px) {
.item-content li .price dd{
width: 50%;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
}
}
.item-content li .price dd span{
color: red;
}
.item-content li .price dd strong{
font-size: 30px;
}
@media screen and (max-width: 750px) {
.item-content li .price dd strong{
font-size: 25px;
}
}
@media screen and (max-width: 640px) {
.item-content li .price dd strong{
font-size: 23px;
}
}
.cam-item .text{
font-size: 14px;
line-height: 1.4;
margin-top: 25px;
}
@media screen and (min-width: 1101px) {
.cam-bn-sm{
display: none;
}
}
@media screen and (max-width: 1100px) {
.cam-bn-pc{
display: none;
}
}
.campaign_box{
margin-right: 15px;
}
.cam-bn-pc img{
height: 55px;
}
.cam-bn{
animation: flash 1.2s linear infinite;
}
@keyframes flash {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
} .stei_up .note__head{
font-size: 24px;
text-align: center;
margin: 0 0 15px;
}
@media screen and (max-width: 960px) {
.stei_up .note .note__head {
font-size: 18px;
}
} .pc-only {
display: block;
}
.sp-only {
display: none;
}
@media screen and (max-width: 480px) {
.pc-only {
display: none;
}
.sp-only {
display: block;
}
.headingText1 {
position: relative;
z-index: 10;
}
.main_visual .title_flex .photobox {
bottom: -14.5vw;
}
.main_visual .title_flex .photobox .pb9{padding: 0 0 9px;}
.purchase-list .purchase-list-box .list-table {
min-width: unset;
}
.purchase-list .purchase-list-box .list-table td {
min-width: unset;
}
.purchase-list .purchase-list-box .purchase-list-box-maker {
font-size: 18px;
text-align: center;
padding: 10.5px 0;
margin-top: 30px;
box-sizing: border-box;
width: 100%;
color: #fff;
background-color:  #024199;
}
}
.purchase-list .purchase-list-box .purchase-list-box-maker {
font-size: 18px;
text-align: center;
padding: 10.5px 0;
margin-top: 30px;
box-sizing: border-box;
width: 100%;
color: #fff;
background-color:  #024199;
}
.purchase-list .purchase-list-box .list-table thead tr:first-child {
border-top: 1px solid #fff;
background-color: #004199;
}
.purchase-list .purchase-list-box .list-table tbody tr:first-child {
background-color: #fff;
}
.purchase-list .purchase-list-box .list-table tr:first-child td {
text-align: left;
}
.purchase-list .purchase-list-box .list-table tr:first-child td:first-child {
border-left: 1px solid #024199;
}
.purchase-list .purchase-list-box .list-table tbody tr td {
text-align: left;
color: #000;
}
.purchase-list .purchase-list-box .list-table tbody tr td span {
text-align: left;
background-color: #fff;
color: #000000;
}
.purchase-list .purchase-list-box .list-table tbody tr td  a {
text-align: left;
}
.purchase-list .purchase-list-box .list-table tbody tr td  a:hover {
text-decoration: none;
border-bottom: none;
}
.purchase-list .purchase-list-box .list-table tbody tr td  a:not(:hover) {
border-bottom: none;
}
.purchase-list .purchase-list-box .list-table td a {
display: block;
text-align: left;
}
.purchase-list .purchase-list-box .list-table tbody tr:first-child td {
color: #000;
border-left: 1px solid #024199;
}
.purchase-list .purchase-list-box {
border-right: none;
border-left: none;
}
.purchase-list .purchase-list-box .list-table {
border-right: 2px solid #024199;
border-left: 2px solid #024199;
border-bottom: 2px solid #024199;
}  #section5 .section-5-pconly {
display: block;
max-width: 410px;
width: 30vw;
position: absolute;
top: 18%;
right: 2vw;
z-index: 1;
}
@media screen and (max-width: 960px) {
#section5 .section-5-pconly {
display: none;
}
}
@media (min-width: 901px) {
#section5 {
position: relative;
background-image: none;
}
#section5 .bg {
z-index: 0;
}
.toner-ink-kaitori #section5 .bg {
z-index: 0 !important;
}
}
.p-mv {
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/kaitori/section2-bg.webp) center center/cover no-repeat;
color: #fff
}
.p-mv__inner {
padding: 3.8194444444vw 23.2638888889vw
}
@media(max-width: 900px) {
.p-mv__inner {
padding:5.1282051282vw 3.8461538462vw
}
}
.p-mv__lead {
font-family: "M PLUS 1",serif;
font-size: 1.875rem;
font-weight: 700;
border: .1875rem solid #fff;
border-radius: .375rem;
padding: 1.25rem 0;
text-align: center;
line-height: 1;
margin-bottom: 2.25rem
}
@media(max-width: 900px) {
.p-mv__lead {
font-size:3.3333333333vw;
margin-bottom: .625rem;
padding: .625rem 0;
line-height: normal;
border-width: .125rem
}
}
.p-mv__catch {
font-size: 3rem;
font-family: "M PLUS 1",serif;
font-weight: 700
}
@media(max-width: 900px) {
.p-mv__catch {
font-size:5.641025641vw
}
}
.p-mv__catch span.logo {
margin-left: .5rem
}
.p-mv__catch span.logo img {
width: 2.625rem;
height: 2.625rem;
margin-right: .375rem;
transform: translateY(2px)
}
@media(max-width: 900px) {
.p-mv__catch span.logo img {
width:1.375rem;
height: 1.375rem
}
}
.p-mv__catch span.text-s {
font-size: 2.25rem
}
@media(max-width: 900px) {
.p-mv__catch span.text-s {
font-size:3.5897435897vw
}
}
.p-mv__image img {
height: auto
}
.p-mv__h1 {
padding: 2.5rem 0;
background-color: #0e68cd;
text-align: center;
line-height: 1;
font-family: "M PLUS 1",serif;
font-size: 2.5rem;
font-weight: 700
}
@media(max-width: 900px) {
.p-mv__h1 {
font-size:1.25rem;
padding: 1.25rem;
line-height: normal
}
}  #purchase-area .purchase-area-flex {
display: flex;
justify-content: center;
gap: 0 100px;
}
#purchase-area .purchase-area-box {
width: 30%;
margin-top: 30px;
}
#purchase-area .purchase-area-box .annotation {
margin-bottom: 20px;
}
#purchase-area .purchase-area-box .purchase-area-box-detail .purchase-area-box-detail-title {
font-size: 20px;
font-weight: 700;
color: #014099;
margin-bottom: 20px;
}
#purchase-area .purchase-area-box .purchase-area-box-detail .purchase-area-box-detail-list li {
text-align: right;
line-height: 1.5;
margin-bottom: 10px;
}
#purchase-area .purchase-area-flex .purchase-area-img {
width: 50%;
}
@media screen and (max-width: 768px) {
#purchase-area .purchase-area-flex {
flex-direction: column;
}
#purchase-area .purchase-area-box {
width: 100%;
}
}
#blog .blog-section3 .photobox {
height: auto;
}
#blog .blog-section3 .photobox img {
width: 100%;
height: 50%;
}
@media screen and (max-width: 960px) {
.photobox {
height: auto;
}
#purchase-area .purchase-area-flex .purchase-area-img {
width: 80%;
margin: 0 auto;
}
}  .toner-ink-kaitori .main_visual .kaitori-title-h1 {
background-color: transparent;
margin-bottom: 50px;
}
#purchase-area .purchase-area-box {
min-width: 300px;
}
@media screen and (max-width: 960px) {
.toner-ink-kaitori .main_visual .kaitori-title-h1 {
margin-bottom: 20px;
}
#purchase-area .purchase-area-box {
min-width: unset;
}
}  .c-accordion__item .c-accordion__child .area-list-title {
padding: 1.3888888889vw 2.7777777778vw 0 2.7777777778vw;
}
.c-accordion__item .c-accordion__child .area-list-title a {
font-size: 18px;
color: #000;
}
@media screen and (max-width: 960px) {
.c-accordion__item .c-accordion__child .area-list-title a {
font-size: 16px;
}
}  .cam-bn-pc img {
width: 12.5vw;
max-width: 250px;
height: auto;
}
@media screen and (max-width: 480px) {
#top_header .logo_box .logo_text {
font-size: 11.5px;
}
}  .voice_shousai h2 {
color: #014099;
text-shadow: 0 0 5px white;
border-left: solid 7px #014099;
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);
font-size: 23px;
padding: 0 0 0 10px;
}
#blog {
margin: 0 auto;
}  .voice_shousai h2 {
color: #014099;
text-shadow: 0 0 5px white;
border-left: solid 7px #014099;
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);
font-size: 23px;
padding: 0 0 0 10px;
}
#blog {
margin: 0 auto;
}
.maker_img {
object-fit: contain;
}  .voice_shousai h2 {
color: #014099;
text-shadow: 0 0 5px white;
border-left: solid 7px #014099;
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);
font-size: 23px;
padding: 0 0 0 10px;
}
#blog {
margin: 0 auto;
}  .maker_img {
object-fit: contain;
width: 100%;
}
.konpo-img {
width: 100%;
object-fit: contain;
aspect-ratio: 668 / 449;
}
.maker_inner p {
margin: 17% 0 5% 0;
}
.img-wd100 {
width: 100%;
height: auto;
object-fit: contain;
}
.toner-ink-kaitori .main_visual .sub_text {
margin: 120px 0 0 0;
}
.toner-ink-kaitori .main_visual .title_flex .title_inner_flex {
display: flex;
align-items: center;
width: 25%;
justify-content: center;
flex-direction: row;
}
@media screen and (max-width: 960px) {
#section1 .point_img1 {
width: 50px;
height: 45px;
}
.maker_img {
width: 150px !important;
height: 75px;
aspect-ratio: 2 / 1;
}
.konpo-img {
height: auto;
}
.toner-ink-kaitori .main_visual .sub_text {
margin: 50px 0 0 0;
}
}  .toner-ink-kaitori-area {
padding: 3%;
margin-bottom: 40px;
}
.toner-ink-kaitori-area__title {
background-color: #014099;
color: #fff;
text-align: center;
font-size: 28px;
padding: 16px 0;
}
.toner-ink-kaitori-area__sp-only {
display: none;
}
div.point_top {
padding-top: 60px;
}
.toner-ink-kaitori-area__contents-wrap {
margin-top: 40px;
padding-right: 2%;
padding-left: 2%;
}
.toner-ink-kaitori-area__items {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.toner-ink-kaitori-area__item {
width: 25%;
padding: 4px 0;
}
.toner-ink-kaitori-area__item a {
color: #014099;
}
.toner-ink-kaitori-area__contents-list-wrap {
margin-top: 20px;
}
@media (max-width: 767px) {
.toner-ink-kaitori-area__title  {
font-size: 18px;
padding: 12px 0;
}
.toner-ink-kaitori-area__sp-only {
display: block;
}
div.point_top {
padding-top: 40px;
}
.toner-ink-kaitori-area__contents-wrap {
margin-top: 40px;
}
.toner-ink-kaitori-area__contents-list-wrap {
margin-top: 14px;
}
.toner-ink-kaitori-area__item {
width: 50%;
}
}  div.blog-new-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 24px;
margin-bottom: 24px;
}
div.blog-new-grid .users_voice:first-child,
div.blog-new-grid .users_voice {
margin: 0;
}
div.blog-new-grid .users_voice {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.blog-new-grid .users_voice .photobox {
width: 211px;
height: auto;
aspect-ratio: 211 / 116;
margin: 0;
}
.blog-new-flex .flex {
justify-content: center;
}
.blog-new-flex .users_voice .flex p {
margin: 0;
}
.blog-new-flex .flex2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 425px) {
div.blog-new-grid {
grid-template-columns: 1fr;
}
}
.blog-new-grid .users_voice p.common_h3 {
font-size: 18px !important;
}
.blog-new-flex {
display: flex;
flex-direction: column;
}  .author-info-area {
margin-top: 40px;
position: relative;
}
.author-info-area__tag {
position: absolute;
top: -34px;
left: 0;
color : #fff;
font-weight: bold;
background-color: #014099;
padding: 4px 8px !important;
}
.author-info-box {
padding: 24px 20px;
border: 2px solid #014099;
background-color: #f9f9f9;
}
.author-info-box__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.author-info-box__left-img-box {
width: 140px;
height: 140px; 
border-radius: 50%;
border: 2px solid #014099;
aspect-ratio: 1 / 1;
}
div.author-info-box__left-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50% !important;
display: block;
margin: 0 !important;
}
.author-info-box__right {
width: calc(100% - 200px);
padding-left: 24px;
}
.author-info-box__name {
font-weight: bold;
}
.author-info-box__text {
margin-top: 14px;
}
@media screen and (max-width: 768px) {
.author-info-box__inner {
flex-direction: column;
}
.author-info-box__right {
width: 100%;
padding-left: 0;
margin-top: 24px;
}
}
@media screen and (max-width: 425px) {
.author-info-area__tag {
top: -25px;
}
}.org {
color: #f60
}
.red {
color: #d0131b !important
}
.mp1 {
font-family: "M PLUS 1", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal
}
.mp1-b {
font-family: "M PLUS 1", serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal
}
.mp1-B {
font-family: "M PLUS 1", serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal
}
.zmg {
font-family: "Zen Maru Gothic", serif;
font-weight: 400;
font-style: normal
}
.zmg-m {
font-family: "Zen Maru Gothic", serif;
font-weight: 500;
font-style: normal
}
.zmg-b {
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal
}
.c-link {
color: inherit;
text-decoration: underline
}
.c-link:hover {
text-decoration: none
}
.c-button {
color: #fff;
line-height: 1.875rem;
font-weight: 700
}
@media(min-width: 901px) {
.c-button {
font-size: 1.25rem
}
}
.c-button--blu {
background-color: #004098;
padding: 1rem 1.875rem;
border-radius: 1.875rem
}
@media(max-width: 900px) {
.c-button--blu {
display: block;
margin-top: 1.25rem
}
}
.c-button--org {
background-color: #f60;
padding: 1.25rem 1.875rem;
border-radius: .375rem
}
@media(max-width: 900px) {
.c-button--org {
display: block;
margin: 1.25rem auto 0;
text-align: center;
width: 60vw
}
}
.c-button:hover {
opacity: .7
}
.c-accordion__item {
margin-bottom: .1875rem
}
.c-accordion__parent {
position: relative;
color: #fff;
background-color: #004098;
font-weight: 700;
padding: 1.25rem;
cursor: pointer
}
@media(min-width: 901px) {
.c-accordion__parent {
font-size: 1.5rem;
padding: 1.25rem 3.75rem
}
}
.c-accordion__parent.is-open .c-accordion__button::before {
transform: translateX(-50%) rotate(90deg)
}
.c-accordion__button {
position: absolute;
width: 1.5rem;
height: 1.5rem;
top: calc(50% - 1px);
right: 3.75rem;
transform: translateY(-50%)
}
@media(max-width: 900px) {
.c-accordion__button {
right: 1.25rem
}
}
.c-accordion__button::before,
.c-accordion__button::after {
background-color: #fff;
position: absolute;
display: inline-block;
border-radius: .0625rem
}
.c-accordion__button::before {
content: "";
width: .1875rem;
height: 100%;
top: 0;
left: 50%;
transform-origin: center center;
transform: translateX(-50%) rotate(0deg);
transition: transform .8s cubic-bezier(0.19, 1, 0.22, 1)
}
.c-accordion__button::after {
content: "";
width: 100%;
height: .1875rem;
top: 50%;
left: 0;
transform: translateY(-50%)
}
.c-accordion__child {
font-size: 1rem;
max-height: 0;
overflow: hidden;
transition: all .8s cubic-bezier(0.19, 1, 0.22, 1)
}
@media(min-width: 901px) {
.c-accordion__child {
padding-left: 1.5rem
}
}
.c-accordion__child.is-open {
max-height: 55.5555555556vw
}
.left_border {
border: 0;
display: flex;
align-items: center
}
.left_border::before {
content: "";
display: block;
width: .375rem;
height: 1.875rem;
border-radius: .1875rem;
background-color: #004098;
margin-right: .5625rem
}
.c-link::after {
content: "";
display: block;
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/kaitori/ico-alink.svg) center center/cover no-repeat;
width: 1.875rem;
height: 1.875rem;
margin-left: 1.25rem
}
@media(max-width: 900px) {
.c-link::after {
width: 1rem;
height: 1rem;
margin-left: .375rem
}
}
.toner-ink-kaitori__h1 {
background-color: #004098;
text-align: center;
color: #004098;
padding: 1rem 0;
line-height: 1.2;
text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff
}
@media(min-width: 901px) {
.toner-ink-kaitori__h1 {
padding: 1.625rem 0;
font-size: 3rem
}
}
.toner-ink-kaitori__text-wrap {
position: relative
}
@media(min-width: 901px) {
.toner-ink-kaitori__text-wrap {
margin-bottom: 1.1111111111vw
}
}
.toner-ink-kaitori__text-wrap::before,
.toner-ink-kaitori__text-wrap::after {
position: absolute;
width: 5rem;
top: 50%;
transform: translateY(-50%)
}
@media(min-width: 901px) {
.toner-ink-kaitori__text-wrap::before,
.toner-ink-kaitori__text-wrap::after {
width: 11.25rem
}
}
.toner-ink-kaitori__text-wrap::before {
content: "";
display: block;
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/kaitori/top_text1_left.webp) center center/cover no-repeat;
height: 3.125rem;
left: -5rem
}
@media(min-width: 901px) {
.toner-ink-kaitori__text-wrap::before {
height: 7rem;
left: -12.5rem
}
}
.toner-ink-kaitori__text-wrap::after {
content: "";
display: block;
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/kaitori/top_text1_right.webp) center center/cover no-repeat;
height: 2rem;
right: -5rem
}
@media(min-width: 901px) {
.toner-ink-kaitori__text-wrap::after {
height: 4.5rem;
right: -12.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori__text-wrap .arch {
margin-top: .625rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .main_visual {
padding-top: 3.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .main_visual .title_flex:first-of-type {
padding-bottom: 1.25rem
}
}
.toner-ink-kaitori .main_visual .title_flex .title_inner_flex {
flex-direction: column
}
@media(min-width: 901px) {
.toner-ink-kaitori .main_visual .title_flex .title_inner_flex {
width: 100%
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .main_visual .title_flex .title_inner_flex .main_text {
font-size: 3.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .main_visual .title_flex .title_inner_flex .main_text:nth-of-type(2) {
font-size: 4.25rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori section {
padding: 4.1666666667vw 12.5vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori section#section5,
.toner-ink-kaitori section.discard,
.toner-ink-kaitori section.purchase-list {
padding-top: 0
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .point {
margin-right: 1.1111111111vw;
flex-basis: 11.1111111111vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .point_top {
padding-top: 4.1666666667vw !important;
padding-bottom: 4.6527777778vw;
bottom: auto
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .point_top .common_h2 {
flex: 1;
font-size: 2.6388888889vw;
letter-spacing: normal
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .point_top .common_h2 .cercle1 {
margin: 0;
padding: 0;
width: 7.2916666667vw;
height: 7.2916666667vw;
letter-spacing: .125rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reason {
width: max-content;
border-radius: 2.0833333333vw;
padding: 1.1111111111vw 3.4722222222vw;
font-size: 1.25rem;
top: -1.875vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox1 {
margin-bottom: 4.4444444444vw;
border-radius: .6944444444vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox1 .point_img {
width: 12.7777777778vw;
height: 10.4166666667vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox1 .reason_text {
text-align: center;
font-size: 1.25rem;
padding-top: 0
}
}
.toner-ink-kaitori #section1 .reasonbox1 .reason_text a {
color: initial;
text-decoration: underline
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox1 .reason_text a:hover {
text-decoration: none
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox1.--last {
margin-bottom: 0;
padding-bottom: 3.4722222222vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox1.--last .point_img {
width: 11.3888888889vw;
height: auto;
margin: 2.0833333333vw auto 2.7777777778vw
}
}
@media(max-width: 900px) {
.toner-ink-kaitori #section1 .reasonbox1.--last .reason_midashibox {
flex-direction: column
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox1.--last .reason_midashibox {
height: auto
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox1.--last .reason_text {
text-align: left;
padding: 1.3888888889vw 6.9444444444vw;
letter-spacing: .005em;
margin-bottom: 1.3888888889vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reason_container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.0833333333vw;
row-gap: 4.4444444444vw;
margin-bottom: 4.4444444444vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reasonbox {
width: auto;
margin: auto;
border-radius: .6944444444vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section1 .reason_midashibox {
flex-direction: column
}
}
.toner-ink-kaitori .maker-list {
width: 100%;
border-right: 2px solid #024199;
border-left: 2px solid #024199
}
@media(min-width: 901px) {
.toner-ink-kaitori .maker-list {
min-width: 500px
}
}
.toner-ink-kaitori .maker-list thead {
background-color: #024199;
color: #fff
}
.toner-ink-kaitori .maker-list__head td {
padding: .625rem;
text-align: center
}
.toner-ink-kaitori .maker-list__body td {
text-align: center;
padding: 1.5625rem 0
}
@media(max-width: 900px) {
.toner-ink-kaitori .maker-list__body td {
padding: 1.25rem 3.75rem
}
}
.toner-ink-kaitori .maker-list__logo {
height: auto
}
@media(min-width: 901px) {
.toner-ink-kaitori .maker-list__logo {
width: 22.3125rem !important
}
}
.toner-ink-kaitori .kansai {
padding: 0
}
.toner-ink-kaitori .kansai-top {
background-color: #ddebfd
}
.toner-ink-kaitori .kansai-top__inner {
padding: 1.875rem 1.25rem;
display: flex
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-top__inner {
padding: 5.5555555556vw 12.5vw
}
}
@media(max-width: 900px) {
.toner-ink-kaitori .kansai-top__inner {
flex-direction: column-reverse
}
}
@media(max-width: 900px) {
.toner-ink-kaitori .kansai-top__map {
padding: 1.25rem 2.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-top__map {
flex-basis: 37.5vw
}
}
.toner-ink-kaitori .kansai-top__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-top__content {
flex: 1
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-top__content .text {
font-size: 1rem;
font-weight: 500
}
}
.toner-ink-kaitori .kansai-top__content .text span {
color: #fff;
background-color: #f60;
border-radius: .375rem;
padding: 0 1rem;
margin: 0 .25rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-top__content .text span {
font-size: 1.5rem
}
}
.toner-ink-kaitori .kansai-top__content .text:last-of-type {
margin-top: 1.25rem
}
.toner-ink-kaitori .kansai-top__content .balloon {
border: .125rem solid #f60;
background-color: #fff;
border-radius: 3.75rem;
padding: .9375rem 3.5rem;
position: relative;
margin: 1.25rem auto;
font-weight: 700
}
@media(max-width: 900px) {
.toner-ink-kaitori .kansai-top__content .balloon {
padding: .9375rem 1.875rem
}
}
.toner-ink-kaitori .kansai-top__content .balloon::before,
.toner-ink-kaitori .kansai-top__content .balloon::after {
top: 100%;
left: 50%;
border: solid rgba(0, 0, 0, 0);
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
.toner-ink-kaitori .kansai-top__content .balloon::after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: .625rem;
margin-left: -0.625rem
}
.toner-ink-kaitori .kansai-top__content .balloon::before {
border-color: rgba(255, 102, 0, 0);
border-top-color: #f60;
border-width: .8125rem;
margin-left: -0.8125rem
}
.toner-ink-kaitori .kansai-bottom__title {
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/kaitori/kansai-title-bg.webp) center center/110% no-repeat;
padding: 2.7777777778vw 0;
text-align: center
}
.toner-ink-kaitori .kansai-bottom__title h2 {
color: #004098;
background-color: #fff;
padding: 1.3888888889vw;
display: inline-block;
line-height: 1;
font-size: 1.125rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-bottom__title h2 {
font-size: 2.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-bottom__inner {
padding: 4.1666666667vw 12.5vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-bottom__acc {
padding: 0 6.25vw
}
}
.toner-ink-kaitori .kansai-bottom .area-list {
padding: 1.3888888889vw 2.7777777778vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .625rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-bottom .area-list {
grid-template-columns: repeat(4, 1fr)
}
}
.toner-ink-kaitori .kansai-bottom .area-list li {
font-weight: 500
}
@media(min-width: 901px) {
.toner-ink-kaitori .kansai-bottom .area-list li {
font-size: 1.125rem
}
}
.toner-ink-kaitori .kansai-bottom .area-list li a {
color: initial
}
@media(min-width: 901px) {
.toner-ink-kaitori .jirei__inner {
padding: 0 12.4305555556vw
}
}
.toner-ink-kaitori .jirei__h2 {
font-weight: 700;
text-align: center;
margin-bottom: 3.75rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .jirei__h2 {
font-size: 2.5rem
}
}
.toner-ink-kaitori .jirei__item {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: .625rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .jirei__item {
gap: .3125rem;
height: 12.5rem;
flex-direction: row;
margin-bottom: 2.5rem
}
}
.toner-ink-kaitori .jirei__thumnail {
height: 12.5rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .jirei__thumnail {
flex-basis: 20.625rem
}
}
@media(max-width: 900px) {
.toner-ink-kaitori .jirei__thumnail {
width: 100%
}
}
.toner-ink-kaitori .jirei__thumnail img {
object-fit: cover;
height: 100%
}
.toner-ink-kaitori .jirei__content {
padding: 1.25rem;
border-top: 1px solid #004098;
border-bottom: 1px solid #004098;
height: 100%;
display: flex;
align-items: center
}
@media(min-width: 901px) {
.toner-ink-kaitori .jirei__content {
flex: 1;
padding: 0 2.375rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .jirei__h3 {
font-size: 2rem;
font-weight: 500
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .jirei__button {
text-align: center;
padding: 1.875rem 0 2.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .jirei__button a {
display: inline-block
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .stei_up .note {
width: auto
}
}
.toner-ink-kaitori #section2 {
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/kaitori/section2-bg.webp) center center/cover no-repeat;
padding: 1.25rem 1.25rem 0
}
@media(min-width: 901px) {
.toner-ink-kaitori #section2 {
padding: 4.1666666667vw 12.5vw 0
}
}
.toner-ink-kaitori #section2 .common_h2,
.toner-ink-kaitori #section2 .common_h3 {
color: #fff;
letter-spacing: normal
}
.toner-ink-kaitori #section2 .common_h3 {
padding-bottom: 1.25rem
}
@media(min-width: 901px) {
.toner-ink-kaitori #section2 .common_h3 {
padding-bottom: 2.5rem
}
}
.toner-ink-kaitori #section2 .contact-list {
display: flex;
gap: 2.5rem;
justify-content: center;
align-items: stretch;
margin-bottom: .375rem
}
@media(max-width: 900px) {
.toner-ink-kaitori #section2 .contact-list {
flex-direction: column;
gap: .625rem
}
}
.toner-ink-kaitori #section2 .contact-list li {
display: flex;
align-items: stretch
}
.toner-ink-kaitori #section2 .contact-list li a {
color: #fff;
background-color: #f60;
display: flex;
align-items: center;
border-radius: .375rem;
box-sizing: border-box;
padding: 1rem 5rem;
font-size: 1.125rem
}
@media(max-width: 900px) {
.toner-ink-kaitori #section2 .contact-list li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;
height: 5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section2 img {
width: 53.4722222222vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 {
padding: 4.1666666667vw 12.5vw 1.3888888889vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .step {
justify-content: center
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .step .common_h2 {
font-size: 1.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .step p {
font-size: 1rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .midashibox p:nth-child(2) {
font-size: initial
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .midashibox .phone_box {
margin-bottom: .375rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .midashibox.fax_box p:nth-child(1) {
font-size: 1.875rem;
margin-bottom: .375rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .choicebox .flow_img {
margin: 1.3888888889vw auto
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .choicebox a {
background-color: #f60;
border-radius: .375rem;
margin-top: .375rem;
padding: 1.25rem 0
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .choicebox2 .kaitori {
margin-bottom: .625rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .choicebox2 .kaitori p:last-of-type {
border-radius: .375rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .choicebox2 a {
display: flex;
align-items: center;
justify-content: center;
border-radius: .375rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section4 .choicebox2 .arrow2 {
width: 1.125rem;
height: 1.125rem;
padding-right: 0;
margin-left: 1rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .bg {
position: relative;
z-index: -1;
padding-bottom: 5.5555555556vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .bg::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: linear-gradient(180deg, #fefcde 0%, #ffec08 100%)
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 {
background-color: rgba(0, 0, 0, 0);
background-position: 95% 40%;
padding: 6.25vw 0 5.5555555556vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .common_h2 {
text-align: center
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .common_h2::before,
.toner-ink-kaitori #section5 .common_h2::after {
content: "";
display: inline-block;
width: .1875rem;
height: 2.25rem;
background-color: #f60
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .common_h2::before {
margin-right: 1.25rem;
transform: rotate(-20deg)
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .common_h2::after {
margin-left: .625rem;
transform: rotate(20deg)
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .faq {
position: relative;
z-index: 1;
max-width: none;
padding: 5.5555555556vw 3.8888888889vw 0 12.5vw
}
}
.toner-ink-kaitori #section5 .faqbox {
padding: 0
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .faqbox {
position: initial
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .faq_btn {
position: relative;
z-index: 1;
width: auto;
margin-left: 37.9861111111vw;
margin-right: 37.9861111111vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .faq ul li {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 1.875rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .faq ul li::before {
content: "";
display: inline-block;
background: url(//protona.jp/wp-content/themes/twentyseventeen/image/kaitori/ico-faqlist.svg) center center/cover no-repeat;
width: 1.25rem;
height: 1.25rem;
margin-right: .75rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .faq ul+p {
font-size: 1rem;
font-weight: 400
}
}
.toner-ink-kaitori #section5 .faq_note {
margin-top: 6.9444444444vw
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .faq_note {
font-size: 1.5rem;
font-weight: 700
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #section5 .faq_note span {
font-size: 1.875rem
}
}
.toner-ink-kaitori .kaitori_flow .flow_list {
position: relative
}
.toner-ink-kaitori .kaitori_flow .flow_list p {
color: #fff;
background-color: #004098;
letter-spacing: .05em;
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 500;
padding: 2.5rem 5.3125rem;
border-bottom: 2px solid #fff;
position: relative
}
@media(max-width: 900px) {
.toner-ink-kaitori .kaitori_flow .flow_list p {
font-size: 1.125rem;
flex-direction: column;
justify-content: center;
padding: 2.5rem 1.25rem 1.25rem
}
}
.toner-ink-kaitori .kaitori_flow .flow_list img {
width: 5rem;
height: 5rem;
margin-right: 3.75rem
}
@media(max-width: 900px) {
.toner-ink-kaitori .kaitori_flow .flow_list img {
width: 3.75rem;
height: 3.75rem;
margin: 0 auto 1.25rem
}
}
.toner-ink-kaitori .kaitori_flow .flow_list .arrow:nth-of-type(1) {
z-index: 3
}
.toner-ink-kaitori .kaitori_flow .flow_list .arrow:nth-of-type(2) {
z-index: 2
}
.toner-ink-kaitori .kaitori_flow .flow_list .arrow:nth-of-type(3) {
z-index: 1
}
.toner-ink-kaitori .kaitori_flow .flow_list .arrow::before,
.toner-ink-kaitori .kaitori_flow .flow_list .arrow::after {
left: 7.8125rem;
border: solid rgba(0, 0, 0, 0);
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
@media(max-width: 900px) {
.toner-ink-kaitori .kaitori_flow .flow_list .arrow::before,
.toner-ink-kaitori .kaitori_flow .flow_list .arrow::after {
left: 50%
}
}
.toner-ink-kaitori .kaitori_flow .flow_list .arrow::before {
bottom: -3.5rem;
border-color: rgba(255, 102, 0, 0);
border-top-color: #fff;
border-width: 1.75rem;
margin-left: -1.75rem
}
.toner-ink-kaitori .kaitori_flow .flow_list .arrow::after {
bottom: -3.375rem;
border-color: rgba(255, 255, 255, 0);
border-top-color: #004098;
border-width: 1.875rem;
margin-left: -1.875rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow:first-of-type {
margin-top: 0
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .kaitroi_h4 {
margin-bottom: 1.5rem;
padding: 1.25rem 0
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .haiso-note {
background-color: #d9d9d9
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .doufu_flex {
gap: 2.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .doufu_flex .doufu {
width: 50%;
margin: 0
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .doufu_flex .doufu:nth-of-type(1) img {
width: 6.25rem;
height: auto
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .doufu_flex .doufu .doufu_photobox {
height: 8.75rem;
display: flex;
align-items: center;
justify-content: center
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .doufu_flex.--hojin .doufu:nth-of-type(2) img {
width: 8.75rem;
height: auto
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .doufu_flex.--hojin .doufu:nth-of-type(2) .doufu_textbox {
margin-top: 0
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .doufu_flex.--kojin .doufu:nth-of-type(2) img {
width: 6.25rem;
height: auto;
margin-right: 1.25rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .kaitori_flow .doufu_flex.--kojin .doufu:nth-of-type(2) img:nth-of-type(2) {
width: 8.75rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .store-info {
margin-top: 4.1666666667vw
}
}
.toner-ink-kaitori .store-info table {
border: .125rem solid #004098;
width: 100%
}
.toner-ink-kaitori .store-info tr:not(:last-of-type) {
border-bottom: .125rem solid #004098
}
.toner-ink-kaitori .store-info th,
.toner-ink-kaitori .store-info td {
color: #004098;
padding: 1.3888888889vw;
font-weight: 500
}
@media(min-width: 901px) {
.toner-ink-kaitori .store-info th,
.toner-ink-kaitori .store-info td {
font-size: 1.5rem
}
}
.toner-ink-kaitori .store-info th {
background-color: #e8f1ff;
text-align: center;
width: 27.7777777778vw;
border-right: .125rem solid #004098
}
.toner-ink-kaitori .store-info td {
padding-right: 2.0833333333vw;
width: calc(100% - 27.7777777778vw)
}
@media(min-width: 901px) {
.toner-ink-kaitori #shutcho_kaitori .flex {
flex-direction: column-reverse
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #shutcho_kaitori .flex_textbox {
width: 100%
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #shutcho_kaitori .photobox img {
margin: 2.5rem 0 1.25rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .purchase-list .sec-ttl {
margin-bottom: 3.75rem
}
}
.toner-ink-kaitori .purchase-list .common_h2 {
color: #d0131b;
letter-spacing: normal;
font-size: 1.25rem;
line-height: 2.875rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .purchase-list .common_h2 {
line-height: 5.625rem;
font-size: 2.5rem;
font-weight: 700
}
}
.toner-ink-kaitori .purchase-list__text01 {
width: 15rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .purchase-list__text01 {
width: 30rem
}
}
.toner-ink-kaitori .purchase-list__text02 {
width: 9.375rem
}
@media(min-width: 901px) {
.toner-ink-kaitori .purchase-list__text02 {
width: 18.75rem;
vertical-align: sub
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__title {
margin-bottom: 1.875rem;
font-size: 2.5rem;
font-weight: 700
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__head-text {
padding: 0 2.7777777778vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__list {
margin-top: 1.3888888889vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__list li {
margin-bottom: 2.7777777778vw
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__list-head {
text-align: center;
margin-bottom: 3.75rem;
font-size: 2.25rem;
font-weight: 700
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__list-sub-head {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 1.25rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__list-item a {
color: initial;
text-decoration: underline;
display: flex;
align-items: center;
font-size: 1.75rem;
font-weight: 500
}
}
.toner-ink-kaitori .discard__list-item a:hover {
text-decoration: none
}
.toner-ink-kaitori .discard__list-text {
text-align: center;
padding: 1.25rem 0
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__list-text {
padding: 3.75rem 0 5rem
}
}
.toner-ink-kaitori .discard__list-text-sub {
margin-bottom: 1.25rem;
font-weight: 500
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__list-text-sub {
font-size: 1.25rem
}
}
.toner-ink-kaitori .discard__list-text-main {
font-weight: 700
}
@media(min-width: 901px) {
.toner-ink-kaitori .discard__list-text-main {
font-size: 1.5rem
}
}
@media(min-width: 901px) {
.toner-ink-kaitori #company {
padding: 0
}
}
@media(min-width: 901px) {
.toner-ink-kaitori .footer .map {
display: none
}
}
@media(min-width: 901px) {
.purchase-list .purchase-list-box {
border-bottom: 0;
margin-top: 0 !important
}
}
@media(min-width: 901px) {
.purchase-list .purchase-list-box .list-table:not(:last-of-type) {
margin-bottom: 2.5rem
}
}
.purchase-list .purchase-list-box .list-table td a {
color: inherit
}
@media(min-width: 901px) {
#section4-2 .textbox p.left_border {
font-size: 24px
}
}
.l-header__flex {
display: flex;
padding: 2.0625rem;
margin: 2.7777777778vw
}
.l-header__basis {
flex-basis: 27.5vw
}
.l-header__content {
flex: 1
}
.c-hd__text {
background-color: #0e68cd;
color: #fff;
font-size: .875rem;
border-radius: .1875rem
}
.c-hd__logo {
display: flex
}
.c-hd__logo .logo {
width: 3.75rem
}
.c-hd__logo .logo img {
width: 100%;
height: auto
}
.c-hd__logo .name {
font-size: 1.875rem;
font-weight: 500;
color: #225e99
}  .navbox .dropdownMaker.height61 {
height: 61px;
}  .toner-ink-kaitori .kansai-top {
padding-top: 50px;
}
.toner-ink-kaitori .kansai-top .kansai-top-title {
font-size: 2.5rem;
color: #004098;
background-color: #fff;
padding: 1.3888888889vw;
display: block;
margin: 0 auto;
width: 70%;
max-width: 750px;
text-align: center;
line-height: 1.5;
}
.toner-ink-kaitori .kansai-top__inner .area-details {
margin-top: 30px;
}
.toner-ink-kaitori .kansai-top__inner .area-details ul li {
line-height: 1.8;
} 
@media(max-width: 901px) {
.toner-ink-kaitori .kansai-top .kansai-top-title {
font-size: 1.125rem;
width: 90%;
}
}  .toner-ink-kaitori .main_visual .sub_text {
margin: 160px 0 0 0;
}
.toner-ink-kaitori .main_visual .title_flex .title_inner_flex {
display: flex;
align-items: center;
width: 25%;
justify-content: center;
flex-direction: row;
}
.toner-ink-kaitori .main_visual .main_text {
line-height: 1.2;
font-size: 3.5vw !important;
letter-spacing: 0.04em;
text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
}
@media screen and (max-width: 960px) {
.toner-ink-kaitori .main_visual .sub_text {
margin: 50px 0 0 0;
}
}
@media (min-width: 901px) {
.toner-ink-kaitori .main_visual .title_flex .title_inner_flex .main_text {
font-size: 3.5vw;
}
}