img.photowaku {
    border: 2px solid #3a1624;
    max-width: 96%;
}



.gr-img {
	margin: 0 auto;
	margin-bottom: 30px;
	width: 80%;
	display: block;
	border-radius: 7px;
	filter: brightness(100%) contrast(115%) saturate(115%);
}

@media (max-width:768px) {
	.gr-img {
		width: 100%;
	}

}

.gr-img0 {
	margin: 0 auto;
	margin-bottom: 30px;
	width: 70%;
	display: block;
	border-radius: 7px;
}

@media (max-width:768px) {
	.gr-img0 {
		width: 100%;
	}

}



.w100 {
	width: 100%;
}

.w90 {
	width: 90%;
}

/* ページ送り */
.btn-next {
	display: block;
	font-size: 14px;
	border: 1px solid #666;
	text-align: center;
	width: 90%;
	margin: 30px auto;
	border-radius: 25px;
	padding: 10px;
	position: relative;
	box-sizing: border-box;
	height: 50px;
}

.btn-next a {
	position: absolute;
	color: #333;
	text-decoration: none;
	width: 100%;
	height: 100%;
	top: auto;
	left: 0;
}
.btn-next::after {
	font-family: "Font Awesome 5 Free";
	content: "\f054";
	font-weight: 900;
	position: absolute;     /*絶対位置*/
	font-size: 1em;     /*サイズ*/
	right: 2rem;     /*アイコンの位置*/
	top: auto;
	bottom: auto;     /*アイコンの位置*/
}


.width60{
    width: 60%;
}
@media ( max-width : 768px ){
    .width60{
        width: 100%;
    }
}

.mokuzi {
    /*  font-size: 12px;*/
    font-weight: 400;

}

.txt-right {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.light {
  font-size: 90%;
  line-height: 1.5;
}

.small {
  font-size: 80%;
}


.t2 {
  margin-top: 3.5rem !important;
}

/*-- card-wrap -- */

.card-wrap{
    width: 80%;
    max-width: 800px;
    margin: auto;
}

@media ( max-width : 768px ){
    .card-wrap{
        width: 80%;
    }
}





p.midasi2 {
    padding-bottom: .4em;
    margin-bottom: 1em;
    margin-top: 2em;
    border-bottom: 1px solid #111;
    font-size: 1.2rem;
    letter-spacing: .03em;
}

p.midasi3 {
    padding: .5em .5em;
    background-color: #f8f8fa;
    letter-spacing: .03em;
    font-size: 1.2rem;
    margin-bottom: .67em;
    margin-top: 2em;
}

p.midasi31 {
    padding: .5em .5em;
    background-color: #4682b4;
    color: #ffffff;
    border-radius: 2px;
    letter-spacing: .03em;
    font-size: 1.2rem;
    margin-bottom: .67em;
    margin-top: 2em;
}


p.midasi4 {
    font-size:18px;
    line-height:25px;
    font-weight: 900;
    margin: 40px 20px;
    padding: 0px 30px; 
    position: relative;
    border-bottom: 2px solid #00bce4;
}

p.midasi4:before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";/*アイコンのユニコード*/
    font-weight: 900;
    position: absolute;/*絶対位置*/
    font-size: 1em;/*サイズ*/
    left: 0;/*アイコンの位置*/
    top: 0;/*アイコンの位置*/
    color: #00bce4; /*アイコン色*/
    font-weight: 900;
}

p.midasi5, p.midasi6{
    font-size:18px;
    line-height:25px;
    font-weight: 900;
    margin: 20px 0px;
    padding: 0px 30px; 
    position: relative;
}
p.midasi6{
    font-weight: 400;
}
p.midasi5:before,p.midasi6:before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";/*アイコンのユニコード*/
    font-weight: 900;
    position: absolute;/*絶対位置*/
    font-size: 1em;/*サイズ*/
    left: 0;/*アイコンの位置*/
    top: 0;/*アイコンの位置*/
    font-weight: 900;
}




p.h1 {
  position: relative;
  padding: 2rem 0;
  margin: 5rem auto 5rem auto;
  text-align: center;
  font-size: 1.4rem;
  /*background: #f9f9fc;*/
}


p.mail, p.headphone, p.microphone, p.pdf, p.page,p.dwnzip,p.zip, p.mp3,p.mp4 ,p.jpeg{
    position:relative;
    line-height:2em;
    padding-left:3em;
}

p.mail:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-email.png) no-repeat;
    background-size:contain;
}


p.headphone:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-headphone.png) no-repeat;
    background-size:contain;
}


p.microphone:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:3em;
    height:3em;
    background:url(./images/icon-microphone.png) no-repeat;
    background-size:contain;
}

p.page:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-page2.png) no-repeat;
    background-size:contain;
}

p.pdf:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-pdf.png) no-repeat;
    background-size:contain;
}

p.dwnzip:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-dwnzip.jpg) no-repeat;
    background-size:contain;
}
p.zip:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-zip.png) no-repeat;
    background-size:contain;
}

p.mp3:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-mp3.png) no-repeat;
    background-size:contain;
}

p.mp4:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-mp4.png) no-repeat;
    background-size:contain;
}

p.jpeg:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-jpg.png) no-repeat;
    background-size:contain;
}

@media screen and (max-width: 690px) {
    p.jpeg,p.mp4,p.mp3,p.dwnzip{display: none;}
}


p.vimeo,p.vimeolink{
    font-size:14px;
    margin-right:20px;
    text-align:right;
}
p.vimeo:after{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 16px;/*画像の幅*/
    height: 16px;/*画像の高さ*/
    background-image: url(./images/Vimeo_icon.png);
    background-size: contain;
    vertical-align: middle;
}

p.linkout:after{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 20px;/*画像の幅*/
    height: 20px;/*画像の高さ*/
    background-image: url(./images/link-out.png);
    background-size: contain;
}



p.f-nitta, p.f-oda, p.f-nisino, p.f-kainuma, p.f-makoto, p.f-sato, p.f-kawabata{
    position:relative;
    line-height:3.6em;
    padding-left:4em;
}


p.f-nitta:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:3.5em;
    height:3.5em;
    background:url(https://www.odamasa.com/q/y/images/f-nitta.jpg) no-repeat;
    background-size:contain;
}

p.f-oda:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:3.5em;
    height:3.5em;
    background:url(https://www.odamasa.com/q/y/images/f-oda.jpg) no-repeat;
    background-size:contain;
}

p.f-nisino:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:3.5em;
    height:3.5em;
    background:url(https://www.odamasa.com/q/y/images/f-nisino.jpg) no-repeat;
    background-size:contain;
}

p.f-kainuma:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:3.5em;
    height:3.5em;
    background:url(https://www.odamasa.com/q/y/images/f-kainuma.jpg) no-repeat;
    background-size:contain;
}

p.f-makoto:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:3.5em;
    height:3.5em;
    background:url(https://www.odamasa.com/q/y/images/f-makoto.jpg) no-repeat;
    background-size:contain;
}

p.f-sato:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:3.5em;
    height:3.5em;
    background:url(https://www.odamasa.com/q/y/images/f-sato.jpg) no-repeat;
    background-size:contain;
}


p.f-kawabata:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:3.5em;
    height:3.5em;
    background:url(https://www.odamasa.com/q/y/images/f-kawabata.jpg) no-repeat;
    background-size:contain;
}




/* ---------------------------------------------
.tategaki
---------------------------------------------*/
.tategaki {
margin: auto;
padding:outo;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright; 
  -ms-text-combine-horizontal: digits 2;
  text-combine-upright: digits 2;
}
.tategaki p{
    display: inline-block;
    box-align: center;
}
.tategaki_h2 {
  font-weight: bold;
  font-size: 2rem;
}


/* ---------------------------------------------
.semi-area
---------------------------------------------*/


.semi-area{
    margin: 20px;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.semi-area figure {
    float: left;
    width: 250px;
    margin: 5px 12px 12px 5px;
    background-color: #F5F9FA;
    border: 2px #333 solid;
    border-radius: 4px;
}

.semi-area figure img {
    display: block;
    margin: 0px 0px 3px 0px;
}

.semi-area figcaption {
    text-align: center;
    font-size:10px;
    color: #000000;
}


@media screen and (max-width: 690px) {
    .semi-area figure{
        float: left;
        width: 160px;
        margin: 5px 5px 5px 5px;
        background-color: #F5F9FA;
        border: 1px #333 solid;
        border-radius: 2px;
    }
}
@media screen and (max-width: 420px) {
    .semi-area figure{
        float: left;
        width: 45%;
        margin: 5px 5px 5px 5px;
        background-color: #F5F9FA;
        border: 1px #333 solid;
        border-radius: 2px;
    }
}

/* ---------------------------------------------
.comp-card-list
---------------------------------------------*/
.comp-card-list {
    display: block;
}
.comp-card-list .data-zero {
    margin-bottom: 32px;
}
.comp-card-list .title {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 28px;
}
.comp-card-list ul {
    display: block;
    width: auto;
    margin: 0 0px 0 0;
    padding: 0;
}
@media screen and (max-width: 690px) {
    .comp-card-list ul {
        margin: 0;
    }
}
.comp-card-list li {
    display: inline-block;
    width: 270px;
    margin: 0 32px 32px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}

.comp-card-list li.harf {
    display: inline-block;
    width: 44%;
    margin: 0 32px 32px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}

.comp-card-list li.harf2 {
    display: inline-block;
    width: 300px;
    margin: 0 32px 32px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}
.comp-card-list li.harf3 {
    display: inline-block;
    width: 500px;
    margin: 0 32px 32px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}
.comp-card-list li.harf4 {
    display: inline-block;
    width: 180px;
    margin: 0 24px 24px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}

.comp-card-list li.harf5 {
    display: inline-block;
    width: 240px;
    margin: 0 32px 32px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}

.comp-card-list li.harf6 {
    display: inline-block;
    width: 100px;
    margin: 0 32px 32px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}
.comp-card-list li.harf7 {
    display: inline-block;
    width: 200px;
    margin: 0 32px 32px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}

.comp-card-list li.harf8 {
    display: inline-block;
    width: 100%;
    margin: 0 32px 32px 0;
    padding: 0;
    vertical-align: top;
    position: relative;
}

.comp-card-list li.harf4a {
    display: inline-block;
    width: 200px;
    margin: 0;
    padding: 0 0 0 5px;
    vertical-align: top;
    position: relative;
    /*  border-left: 1px solid #e7e7e7;
}

    .comp-card-list li.harf4a:last-child{
    padding-right:5px;
    border-right: 1px solid #e7e7e7;*/
}

@media screen and (max-width: 690px) {
    .comp-card-list li, .comp-card-list li.harf, .comp-card-list li.harf2, .comp-card-list li.harf3, .comp-card-list li.harf4, .comp-card-list li.harf5 .comp-card-list li.harf7{
        width: 100%;
        margin: 0 0 32px 0;
    }

    .comp-card-list li.harf4a{
        width: 160px;
        margin: 0 0 32px 0;

    }
}



.comp-card-list li .icon {
    top: 8px;
    left: 8px;
    position: absolute;
    margin-top: 0;
    z-index: 2;
}
.comp-card-list li .icon img {
    width: 40px;
}
.comp-card-list li figure {
    display: block;
}
.comp-card-list li .img-area {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    margin-bottom: 16px;
    height: 151.875px;
    background-color: #fff;
}
@media screen and (max-width: 690px) {
    .comp-card-list li .img-area {
        background-color: inherit;
    }
}
.comp-card-list li .img-area.size-square {
    height: 270px;
}
.comp-card-list li .img-area img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transition: transform 0.3s linear;
    background-color: #fff;
}
.comp-card-list li .text-area {
    display: block;
}
.comp-card-list li .text-area .product-name {
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3em;
    margin-bottom: 8px;
}
.comp-card-list li .text-area .author-name {
    display: inline;
    font-size: 14px;
    line-height: 1.3em;
}
.comp-card-list li .text-area .author-name:hover {
    color: #2662AB;
}




.b {
    font-weight: bold !important;
}

.normal {
    font-weight: normal !important;
}

.big {
    font-size: 1.2em !important;
}

.big2 {
    font-size: 1.5em !important;
}

.big3 {
    font-size: 1.8em !important;
}

.small {
    font-size: 0.8em !important;
}

.red {
    color: #ff0000 !important;
}

.blue {
    color: #0000dd !important;
}

.green {
    color: #008000 !important;
}

.yellow {
    color: #ffff00 !important;
}

.navy {
    color: #1F26A9 !important;
}

.orange {
    color: #ff6600 !important;
}

.pink {
    color: #cc6699 !important;
}

.purple {
    color: #660099 !important;
}

.olive {
    color: #808000 !important;
}

.lime {
    color: #00ff00 !important;
}

.aqua {
    color: #167FA6 !important;
}

.black {
    color: #000 !important;
}

.gray {
    color: #ccc !important;
}

.white {
    color: #fff !important;
}

.brown {
    color: #8B4513 !important;
}

.bd, .bd-b {
    border-bottom: 3px double #000
}

.bd-red, .bd-red-b {
    border-bottom: 3px double #fda2a2
}

.bd-blue, .bd-blue-b {
    border-bottom: 3px double #3094dd
}

.bd-green, .bd-green-b {
    border-bottom: 3px double #1abc9c
}

.bd-yellow, .bd-yellow-b {
    border-bottom: 3px double #f7d745
}

.bd-navy, .bd-navy-b {
    border-bottom: 3px double #153d62
}

.bd-darkblue, .bd-darkblue-b {
    border-bottom: 3px double #1a6fb1
}

.bd-gray, .bd-grey, .bd-gray-b, .bd-grey-b {
    border-bottom: 3px double #95a5a6
}

.bd-lightgray, .bd-lightgray-b {
    border-bottom: 3px double #efefef
}

.bd-orange, .bd-orange-b {
    border-bottom: 3px double #f39c12
}

.bd-pink, .bd-pink-b {
    border-bottom: 3px double #fdc2d6
}

.bd-purple, .bd-lilac, .bd-purple-b, .bd-lilac-b {
    border-bottom: 3px double #da9ef7
}

.bd-olive, .bd-olive-b {
    border-bottom: 3px double #c1c167
}

.bd-lightblue, .bd-lightblue-b {
    border-bottom: 3px double #aee2fc
}

.bd-lightgreen, .bd-lightgreen-b {
    border-bottom: 3px double #2ecc71
}

.bd-mocha, .bd-mocha-b {
    border-bottom: 3px double #cdbcb1
}

.bd-b, .bd-red-b, .bd-blue-b, .bd-green-b, .bd-yellow-b, .bd-navy-b, .bd-darkblue-b, .bd-gray-b, .bd-grey-b, .bd-orange-b, .bd-pink-b, .bd-purple-b, .bd-lilac-b, .bd-olive-b, .bd-lightgray-b, .bd-lightblue-b, .bd-lightgreen-b, .bd-mocha-b {
    border-bottom-style: solid
}





/* ------------------------------------------------------- */
.index-image-items {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


.index-image-item {
    width: calc(100% / 4);
    transition: .5s ease;
}